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.

poważnaręczneWCAG 2.2.2 · Afe-motion

Dlaczego

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.

Poprawka

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.

Przykłady

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

Źródła

Fakty

Identyfikator: css/pause-auto-motion
Waga: poważna
Sprawdzanie: ręczne ocenia człowiek; raport podaje to jako listę kontrolną
Dotyczy plików: page
WCAG 2.2: 2.2.2, poziom A
Uczy jej skill: fe-motion Motion and animation
Od wersji: 0.1.0

Plik reguły na GitHubie

Przeczytaj w terminalu

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