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.