Animation and Accessibility in CSS

Transitions and animations can enhance the user experience by making interactions smooth rather than jumpy, and otherwise bring delight to the interface. But they have accessibility risks. Large spinning animations, for example, can cause dizziness or nausea for people with vestibular disorders, such as vertigo. Consider adding controls for larger, longer, or infinite animations so users can turn them off.

You can also use media queries and the prefers-reduced-motion feature to reduce or disable animation. Users can indicate that they prefer less motion, typically by adjusting the accessibility settings for their operating system.

If you’d like your website to respect those preferences, you must include the prefers- reduced-motion media query. Browsers won’t do it on their own. For example:

.wobble {

animation: wobble 3s ease-in infinite forwards alternate;

animation-play-state: paused;

}

.running {

animation-play-state: running;

}

@media screen and ( prefers-reduced-motion ) {

.running {

animation-play-state: paused;

}

}

In this example, if the user has indicated that they prefer reduced motion, the animation- pLay-state will be paused . If there are controls associated with this animation (such as a Play button), you might use JavaScript to add a hidden attribute to them.

You don’t have to completely disable your animations. For example, if your animation scales and also skews, as with our .wobble animation, you can instead disable a portion of it. Here we’ll change the scale value:

.wobble {

–wobble-min-scale: .5;

–wobble-max-scale: 1.5;

}

@media screen and ( prefers-reduced-motion ) {

.wobble {

–wobble-min-scale: 1;

–wobble-max-scale: 1;

}

}

@keyframes wobble {

25% {

transform: scale( var(–wobble-min-scale) ) skewX(-5deg) rotate(-5deg);

}

50% {

transform: skewY(5deg) rotate(5deg);

}

75% {

transform: skewX(-5deg) rotate(-5deg) scale( var(–wobble-max-scale) );

}

100% {

transform: scale( var(–wobble-max-scale) );

}

}

Notice that we’ve used custom properties (see Chapter 4) to manage the scale factor, and applied them to the .wobble selector.

We’ll cover the ins and outs of media queries in Chapter 10, “Applying CSS Conditionally”.

Flashing animations can trigger seizures in some people with photosensitive epilepsy. Avoid flashing content more than three times per second, particularly across large areas of the screen.

Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.

Leave a Reply

Your email address will not be published. Required fields are marked *