patternjavascriptModerate
Reduced motion — respecting prefers-reduced-motion for vestibular safety
Viewed 0 times
CSS Media Queries Level 5, WCAG 2.1
prefers-reduced-motionanimation accessibilityvestibular disordermotion sensitivityWCAG 2.3.3
Problem
CSS animations, parallax effects, and auto-playing videos can trigger nausea, disorientation, or seizures in users with vestibular disorders or photosensitive epilepsy. No motion preference check means all users are exposed.
Solution
Use the prefers-reduced-motion media query to disable or simplify animations for users who have enabled this system preference.
// CSS — disable animations globally
@media (prefers-reduced-motion: reduce) {
, ::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
// CSS — per-component approach (preferred — keeps meaning)
.spinner {
animation: spin 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.spinner { animation: none; opacity: 0.7; }
}
// JavaScript — check preference at runtime
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!prefersReduced) {
element.animate([...], { duration: 300 });
}
// CSS — disable animations globally
@media (prefers-reduced-motion: reduce) {
, ::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
// CSS — per-component approach (preferred — keeps meaning)
.spinner {
animation: spin 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.spinner { animation: none; opacity: 0.7; }
}
// JavaScript — check preference at runtime
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!prefersReduced) {
element.animate([...], { duration: 300 });
}
Why
WCAG 2.3.3 (Level AAA) recommends avoiding animations that could trigger disorders. Even targeting AA compliance, respecting prefers-reduced-motion is a baseline expectation and a courteous UX decision.
Gotchas
- Setting animation-duration to 0ms can break JavaScript that waits for animationend events — use 0.01ms instead
- Parallax scrolling effects are especially disorienting — disable entirely under reduced motion
- Auto-playing video counts as animation — provide controls or pause it automatically
- Do not remove all motion — subtle opacity fades may still be acceptable and communicate state change
Context
Any UI with CSS animations, transitions, parallax, or auto-playing media
Revisions (0)
No revisions yet.