Keyframes without a reduced-motion fallbackKeyframes without a reduced-motion fallback

Why it matters

People with vestibular disorders turn on reduced motion; the animation ignores it.

Fix

Add @media (prefers-reduced-motion: reduce) that stops or simplifies the animations.

Credit

• WW

  From W3C Web Accessibility Initiative

  WCAG 2.3.3 asks that motion triggered by interaction can be disabled, which prefers-reduced-motion exposes.

References

• prefers-reduced-motion: Sometimes less movement is moreweb.dev
• prefers-reduced-motionMDN Web Docs
• Understanding Success Criterion 2.3.3: Animation from InteractionsW3C
• Understanding Success Criterion 2.2.2: Pause, Stop, HideW3C

See it

Related rules

• ui/animate-layoutAnimating layout properties