a11y/pause-auto-motion

Dlaczego

Looping background video, auto-advancing carousels, tickers and animated illustrations pull attention away from the text. People with attention or reading difficulties cannot focus, and screen magnifier users lose content that moves out of view.

Poprawka

Give every looping or auto-advancing element a visible pause button that keeps its state, pause carousels on hover and focus (fe-a11y-carousel-toast), and start nothing by default when prefers-reduced-motion: reduce matches. Animated GIFs longer than 5 seconds become <video> with controls.

Przykłady

<!-- good -->
<video id="hero-video" autoplay muted loop playsinline src="hero.mp4"></video>
<button type="button" aria-pressed="false" id="pause-hero">Pause background video</button>

Źródła

• WCAG 2.2, Understanding SC 2.2.2 Pause, Stop, Hide
• MDN, prefers-reduced-motion

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain a11y/pause-auto-motion