CSS

`css/pause-auto-motion`

Anything that moves, blinks or scrolls on its own for more than five seconds (carousels, marquees, background video) can be paused.

seriousmanualWCAG 2.2.2 · Afe-motion

Why

Content that keeps moving next to other content pulls attention away from the task, makes text impossible to read for people who read slowly, and can be unbearable for people with attention or vestibular conditions. A rotating carousel also moves the content away while someone is reading or tabbing into it.

Fix

Give auto-playing carousels, tickers, animated backgrounds and looping videos a visible pause (or stop) button, stop rotation while the carousel has focus or the pointer is over it, and do not start it under prefers-reduced-motion: reduce. Loading spinners that show progress are not covered; decorative infinite animations are.

Examples

<section aria-roledescription="carousel" aria-label="Offers">
  <button type="button" aria-pressed="false">Pause rotation</button>
  <!-- slides -->
</section>

Sources

Facts

Id: css/pause-auto-motion
Severity: serious
Check: manual a person reviews it; the report lists it as a checklist
Applies to: page
WCAG 2.2: 2.2.2, level A
Taught by the skill: fe-motion Motion and animation
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

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