How to fix: respect prefers-reduced-motion

What it looks like in the wild

Vestibular-disorder users see animations they cannot disable.

The screen-reader user, keyboard user, or low-vision user encountering this issue does not get an error message. The page just stops working for them. Which is why this kind of bug rarely shows up in your error tracker; it shows up in support tickets, lawsuits, and abandoned conversions.

Why it fails WCAG

Respect OS-level accessibility settings.

The wrong pattern (avoid)

.bounce { animation: bounce 1s infinite; }

The right pattern (copy this)

.bounce { animation: bounce 1s infinite; }
@media (prefers-reduced-motion: reduce) {
  .bounce { animation: none; }
}

Notes from real audits

• prefers-reduced-motion detects the OS-level "Reduce Motion" setting on macOS, iOS, Windows, and Android.

• Some users prefer no animation completely — provide a static fallback in the reduced-motion media query, not just a slower version.

• Framer Motion's useReducedMotion() hook and CSS custom properties can both be used to propagate the preference through design system tokens.

• Parallax scrolling and background video loops are the two patterns most likely to trigger vestibular episodes — disable both under reduced-motion.