2.3.3 Animation from Interactions

Some people experience nausea, dizziness, or headaches from motion animations such as parallax scrolling, page transitions, or spinning elements. This condition is sometimes called vestibular disorder.

At Level AAA, any animation triggered by a user interaction must be disableable. Users must be able to opt out of non-essential motion.

Note that browsers and operating systems provide a 'reduce motion' preference. CSS should respect this using the prefers-reduced-motion media query.

Use the CSS media query @media (prefers-reduced-motion: reduce) to disable or simplify animations for users who have requested reduced motion in their operating system settings.

Provide a button or setting within your site to disable animations for users who may not know about the OS-level setting.

Fade effects and simple opacity transitions are generally acceptable. Parallax scrolling, zooming, and spinning elements are more likely to cause problems.

• Parallax scrolling effect that cannot be disabled
• Page transitions with strong motion effects that ignore prefers-reduced-motion
• Loading animations that spin or zoom regardless of user settings