Animations and prefers-reduced-motion

Some animations and moving content can cause discomfort, nausea, and other physical reactions. Animation that involves only non-moving properties, like opacity, color, and blurs, is more unlikely to be problematic.

Animated media must not auto-play for over five seconds. If you plan to have animations go on longer than five seconds or play on an infinite loop, provide a way for users to pause the animation. An animation that cannot be paused can be extremely distracting for people with different types of cognitive disabilities. I recommend always providing your users with a way to stop animations and videos, it's just user-friendly and good practice. I'm one of those people who likes to turn videos off on a site if I'm provided with a way to do so. I find it easier to concentrate on the text content on the page if there are no constantly moving elements.

If you use animations, pay attention to the WCAG criteria to make sure your website won't cause people to have physical reactions. The physical reactions often don't stop immediately after a person closes the problematic content. So try to remember this when you design your animations.

I also recommend making all the animations obey the prefers-reduced-motion media query. This is covered by criterion 2.3.3, which is level AAA, but I always recommend doing this, even if you aren't aiming for the AAA level. Usually, a person who checks the setting to use reduced motion does it for a reason.

More information:

• An Introduction to the Reduced Motion Media Query by Eric Bailey on CSS-Tricks
• prefers-reduced-motion: Sometimes less movement is more by Thomas Steiner on WebDev
• Designing Safer Web Animation For Motion Sensitivity by Val Head on A List Apart
• Designing With Reduced Motion For Motion Sensitivities by Val Head on Smashing Magazine