css/reduced-motion

Dlaczego

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.

Poprawka

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.

Przykłady

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

Źródła

• 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

Przeczytaj w terminalu

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