Motion must respect prefers-reduced-motion
Rule
respects-reduced-motion· Deeper checks · impact moderate · Live only (static → incomplete)
Why it matters
Users with vestibular disorders can set the OS/browser "reduce motion" preference. The engine re-checks the live page with prefers-reduced-motion: reduce emulated and flags infinite CSS animations that keep running anyway — motion the author never gated behind @media (prefers-reduced-motion). Unlike the static infinite-animation check (which can only advise), this confirms the preference is actually ignored. The widely-copied reduced-motion reset (animation-duration: .01ms !important inside the reduce media query) leaves iteration-count infinite but makes every cycle imperceptible — that counts as respected, not as a violation.
How to fix
Wrap decorative or looping animation in @media (prefers-reduced-motion: no-preference) { … } so it never plays for users who opted out, hold it at a non-moving state under @media (prefers-reduced-motion: reduce), or apply the standard reduced-motion reset (forcing animation-duration to ~0 under reduce).
Example
@keyframes spin{to{transform:rotate(360deg)}} .icon{animation:spin 2s infinite}
@media (prefers-reduced-motion: no-preference){ .icon{animation:spin 2s infinite} }
Example
@keyframes marquee{to{transform:translateX(-100%)}} .banner{animation:marquee 8s linear infinite}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important}}
The common reset shrinks every cycle below perception under reduce — treated as respected even when iteration-count stays infinite.
WCAG success criteria
2.2.2 Pause, Stop, Hide — Level A
Moving, auto-updating or auto-playing content (e.g. carousels) that starts automatically and lasts more than 5s must offer a way to pause, stop, or hide it.
Standards
This rule contributes to the following standards:
WCAG A EN 301 549
| Standard | Criteria |
|---|---|
| EN 301 549 | 9.2.2.2 |