Wstrzymanie, zatrzymanie, ukrycie
Treści ruchome, migające, przewijające się lub automatycznie aktualizowane trwające dłużej niż pięć sekund muszą być możliwe do wstrzymania, zatrzymania lub ukrycia przez użytkownika. Dotyczy karuzel, marquee, tikerów informacyjnych, animowanych reklam i automatycznie odświeżanych źródeł.
Czego wymaga
W przypadku każdej treści spełniającej łącznie trzy warunki: (a) porusza się, miga, przewija lub automatycznie się aktualizuje, (b) uruchamia się automatycznie, (c) trwa dłużej niż pięć sekund i jest wyświetlana równolegle z inną treścią — użytkownik musi mieć mechanizm jej wstrzymania, zatrzymania lub ukrycia. To samo dotyczy automatycznie aktualizowanej treści bez ruchu (na żywo kanały informacyjne, tablice wyników, czat).
Wyjątki: gdy ruch jest niezbędny dla danej czynności (oglądany film, animowany samouczek) oraz gdy treść jest jedynym elementem na ekranie (wskaźnik ładowania przed pojawieniem się treści).
Jak spełnić kryterium
- Dodaj widoczny przycisk Pauza/Odtwarzaj do każdej karuzeli, pokazu slajdów lub automatycznie zmieniającego się baneru. Uczyń go pierwszym aktywnym elementem w widżecie karuzeli.
- Automatycznie wstrzymuj karuzele po najechaniu kursorem i ustawieniu fokusu klawiaturą — ale użytkownik musi mieć możliwość ich całkowitego zatrzymania.
- Dla tikerów informacyjnych, marquee i pasków kursów giełdowych umieszczaj przycisk pauzy w tym samym wierszu, o wymiarach minimum 24×24 px.
- Dla automatycznie odświeżających się pulpitów nawigacyjnych (Kibana, Grafana, sport na żywo) udostępniaj selektor interwału odświeżania z opcją „tylko ręczne odświeżanie”.
- Animowane pliki GIF zapętlające się w nieskończoność zastępuj elementem
<video>z natywnymi kontrolkami lub wzorcem odtwarzania po kliknięciu.
Typowe błędy
- Karuzele z głównym obrazem rotujące co trzy do pięciu sekund bez kontrolki pauzy — nadal najczęstszy błąd 2.2.2 wykrywany w audytach.
- Automatycznie odtwarzane tła wideo bez kontrolek, zwłaszcza na stronach marketingowych.
- Tikery informacyjne przewijające się poziomo bez przycisku pauzy.
- Animowane ilustracje SVG na stronach docelowych zapętlające się wiecznie bez możliwości zatrzymania.
- Powiadomienia toast stale wyskakujące z kanału na żywo bez możliwości ich wyciszenia.
axe i Lighthouse mogą wykryć <marquee> i niektóre naruszenia prefers-reduced-motion, ale nie są w stanie zidentyfikować karuzeli opartej na JavaScript bez kontrolek. Wymagany jest przegląd manualny.
Dlaczego to ważne
Automatycznie poruszająca się treść jest jednym z najbardziej dezaktywujących wzorców w sieci. Odciąga uwagę od osób z zaburzeniami uwagi (ADHD, niektóre zaburzenia lękowe, zespół pourazowy po urazie głowy), sprawia, że użytkownicy czytników ekranu ciągle tracą miejsce, gdy węzły DOM się aktualizują, i uniemożliwia czytanie użytkownikom słabowidzącym, którzy śledzą tekst powoli. Przycisk pauzy to jeden z najtańszych i najbardziej efektywnych dodatków dostępności, jakie może wprowadzić zespół marketingowy.