Image animation and accessibility

For moving, blinking, scrolling, or auto-updating animation that starts automatically, make sure that:

  • the animation doesn’t last longer than 5 seconds before stopping,
  • or the user can easily stop the animation themselves.

Make sure your animation doesn’t contain anything that flashes more than three times in any one-second period.

Animations can cause a variety of symptoms in many users, ranging from mild dizziness to triggering migraines, nausea, and in the case of flashes even seizures.

It can be very hard for many users to concentrate on reading text when an animation next to it is screaming for attention and there is no way to stop it.

Setting reduced motion for animations

You can help users avoid these problems by making all of your animations support the prefers-reduced-motion flag.

prefers-reduced-motion is a system preference that allows the user to indicate that they would prefer not to see animations. But this only works if your code properly supports it!

Check for this system preference using the CSS media feature:


@media (prefers-reduced-motion) {
    .animation {
        /*  adjust the animations if reduced motion is requested.  */
    }
}

Check for the media query in JavaScript by checking the value of the media query:

const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");

Reduced motion doesn’t have to mean no animation at all, but it should be very minimal – no more than is absolutely necessary. When in doubt, eliminate the animation entirely.

Tip: Hidde de Vries wrote a comprehensive blog post about the implementation and accessibility aspects of prefers-reduced-motion in Meeting “2.2.2 Pause, Stop, Hide” with prefers-reduced-motion .

Resources

WCAG Success Criteria for animations

Other resources