a11y/pause-auto-motion

Why

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.

Fix

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.

Examples

<!-- 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>

Sources

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

Read it in the terminal

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