Reduced motion

Reduced motion is a user preference, exposed by every modern operating system, indicating that the user does not want animated, parallax, or otherwise motion-heavy content. Authors detect it via the CSS media query @media (prefers-reduced-motion: reduce).

Who needs reduced motion

Several disability groups are affected by web motion:

• Vestibular disorders — vertigo, Ménière’s disease, and related conditions can be triggered or worsened by parallax scrolling, large page transitions, full-viewport autoplay video, and certain camera- pan animations. Severe episodes can be incapacitating.
• Migraine sufferers — many migraine patterns are aura-triggered; motion is one of the documented triggers.
• Photosensitive epilepsy — flashing content above the WCAG threshold (more than three flashes per second) can trigger seizures. Reduced-motion preference signals that the user wants all motion pared back, even the sub-threshold kind.
• Concentration impairment — ADHD and related conditions make ambient motion (scrolling marquees, perpetual carousels) a significant cognitive tax.

This is a large user population. Different surveys put combined vestibular + migraine + ADHD prevalence above 20% of adults at some point in their lives.

What the OS does

All major operating systems expose a reduced-motion preference in their accessibility settings:

• macOS / iOS — System Settings → Accessibility → Display → Reduce Motion.
• Windows 10/11 — Settings → Accessibility → Visual Effects → Animation effects toggle.
• Android — Settings → Accessibility → Remove animations.

The browser reads this OS preference and exposes it to CSS:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

WCAG criteria

Two WCAG criteria specifically cover motion:

• 2.3.3 Animation from Interactions (AAA, WCAG 2.1+) — motion triggered by user interaction can be disabled, unless the motion is essential to the functionality. The “essential” exception is narrow: a CAPTCHA timer is essential; a scroll-triggered card flip animation is not.
• 2.2.2 Pause, Stop, Hide (A) — any moving, blinking, or auto-updating content lasting more than 5 seconds must have a way to pause / stop / hide it. This applies regardless of user preference.

What to do operationally

A reasonable baseline:

1. Detect the preference. Use the CSS media query in every stylesheet that adds animation.
2. Reduce, not eliminate. “Reduced” doesn’t have to mean “zero”; a 100ms fade is usually fine where a 600ms slide-in is not.
3. Audit the offenders. Hero parallax, mouse-tracking effects, page-transition animations, infinite scrollers, autoplay videos — these are the heavy hitters that need a reduced-motion fallback.
4. Default to motion-light. Many design systems are starting to inverse the default: animation only ships when explicitly opted into per component.