Reduced Motion Preferences
Reduced-motion best practices, WCAG timing distinctions, and a coherent Pause and Play action control for non-essential animation
Scope: requirements and best practice
Motion can trigger vestibular symptoms and make content difficult to follow. Respecting prefers-reduced-motion is strong best practice, but the media query is not itself a blanket Level A/AA requirement. WCAG 2.2.2 Level A applies to moving, blinking, scrolling, and auto-updating information under its duration and presentation conditions. WCAG 2.3.3 Animation from Interactions is Level AAA and applies to non-essential motion animation triggered by interaction.
Use reduced motion without removing essential state changes. A crossfade or immediate state change can preserve meaning that a long slide or zoom effect would otherwise communicate.
Uncontrolled Motion vs. Preference and Pause Controls
Continuous animation with no control.
View inaccessible code
.box { animation: bounce 0.8s infinite; }
/* No user preference or on-page control. */Reduced-motion users receive the same state without the bouncing transition.
View accessible code
@media (prefers-reduced-motion: no-preference) {
.box.is-playing { animation: bounce 0.8s infinite; }
}
@media (prefers-reduced-motion: reduce) {
.box { transition: none; }
}<!-- Changing action label: no aria-pressed. -->
<button type="button" onclick="toggleAnimation(this)">Pause animation</button>| Concern | Requirement or advice |
|---|---|
| Automatically moving content under the 2.2.2 conditions | Level A pause, stop, or hide requirement unless essential. |
| Motion animation triggered by interaction | Level AAA 2.3.3 requirement unless essential. |
prefers-reduced-motion for other animation | Recommended privacy-preserving, user-centred practice. |