Respect reduced motion preferences

Animations can trigger vestibular disorders, migraines, and seizures—respecting motion preferences makes your site usable for millions of affected users.

Quick Reference

• Use prefers-reduced-motion media query to disable non-essential animations
• Never flash content more than 3 times per second (seizure risk)
• Replace motion with opacity/color transitions when reduced motion is enabled
• Provide user controls to pause or disable animations

Check

Verify that animations respect prefers-reduced-motion, no content flashes more than 3 times per second, parallax and scrolljacking effects have alternatives, and motion warnings appear before pages with excessive animation.

Fix

Use @media (prefers-reduced-motion: reduce) to disable animations. Ensure no flashing exceeds 3 flashes/second. Avoid motion behind static text. Provide motion warnings for immersive experiences.

Explain

Explain how motion affects users with vestibular disorders, photosensitive epilepsy, and cognitive disabilities, and why providing motion controls and warnings is essential for inclusive design.

Code Review

Review the rendered markup and interactive states that affect Respect reduced motion preferences. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.

---

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/accessibility/reduced-motion