← Glossary·Accessibility
prefers-reduced-motion
A CSS media query that respects users who’ve asked their OS to minimize motion. Vestibular disorders, migraines, focus.
The `prefers-reduced-motion` media query reads the operating system’s "reduce motion" setting and lets a site dial back animations accordingly. Users enable reduced motion for a range of reasons: vestibular sensitivity (motion can trigger nausea or dizziness), migraine prevention, attention-related conditions, and simple preference.
Respecting the setting is part of WCAG 2.3.3 — Animation from Interactions — and a practical no-brainer for any site that uses scroll-triggered animation, page transitions, or parallax. The remediation isn’t "remove all motion." It’s "remove motion that exceeds vestibular comfort" — large translations, parallax, autoplay video, anything that moves while the user isn’t actively scrolling.
In practice that means wrapping decorative animations in `@media (prefers-reduced-motion: reduce)` blocks and gating JavaScript-driven animations behind a check on `window.matchMedia` of the same query.
Specs & references