css/reduced-motion

Why

Large movement on screen (sliding, zooming, parallax, smooth scrolling) can cause dizziness, nausea and headaches for people with vestibular disorders, and distracts people with attention difficulties. They set "reduce motion" in their system; a page that ignores the setting moves anyway.

Fix

Put non-essential motion inside @media (prefers-reduced-motion: no-preference), or replace it under (prefers-reduced-motion: reduce) with a short fade or nothing. With Tailwind use motion-safe: and motion-reduce:; with an animation library use its reduced-motion option (for example Motion's MotionConfig reducedMotion="user"). Prefer toning motion down to a blanket animation: none !important, which can leave scripts waiting for animationend.

Examples

/* bad */
.hero__title { animation: slide-in 0.8s both; }
/* good */
@media (prefers-reduced-motion: no-preference) {
  .hero__title { animation: slide-in 0.8s both; }
}

Sources

• MDN, prefers-reduced-motion
• WCAG 2.2, Technique C39 (using the reduced motion media query)
• WCAG 2.2, Understanding SC 2.3.3 Animation from Interactions
• web.dev, prefers-reduced-motion

Read it in the terminal

npx github:dawidolko/frontend-skills explain css/reduced-motion