WCAG 2.2.2 Pauza, zatrzymanie, ukrycie

Kryterium sukcesu 2.2.2 dba o to, by treść ruchoma i samoaktualizująca się nie przeszkadzała w korzystaniu z reszty strony. Ruch odciąga uwagę od czytania, co jest trudne dla osób z zaburzeniami uwagi lub niepełnosprawnościami poznawczymi, a ruchomy tekst trudno przeczytać osobom słabowidzącym lub z trudnościami w czytaniu. To poziom A, a kryterium należy do normy EN 301 549 (punkt 9.2.2.2).

Czego wymaga kryterium

Informacje ruchome, migające lub przewijane, które (1) uruchamiają się automatycznie, (2) trwają dłużej niż pięć sekund i (3) są wyświetlane równolegle z inną treścią, muszą mieć mechanizm pauzy, zatrzymania lub ukrycia — chyba że ruch jest niezbędny dla danego działania.

Informacje automatycznie aktualizowane, które (1) uruchamiają się automatycznie i (2) są wyświetlane równolegle z inną treścią, muszą mieć mechanizm pauzy, zatrzymania lub ukrycia albo ustawienia częstotliwości aktualizacji — chyba że aktualizacja jest niezbędna.

Uwagi z WCAG:

• błyski są objęte osobnym kryterium 2.3.1;
• animację ładowania można uznać za niezbędną, jeśli w tej fazie nikt nie może wykonywać żadnych działań, a ukrycie postępu mogłoby sprawić wrażenie, że strona nie działa;
• ponieważ ruchoma treść może zakłócać całą stronę, to kryterium musi spełniać cała treść (brak zakłóceń).

Typowe błędy w sklepie internetowym

• slider w sekcji hero lub karuzela produktów, która obraca się bez końca i nie ma przycisku pauzy;
• przewijany pasek z ogłoszeniami („Darmowa dostawa od 50 € · Nowa kolekcja …”);
• film w tle nagłówka, który odtwarza się w pętli bez żadnej kontroli;
• wyskakujące okienko „12 osób ogląda ten produkt” lub „Anna z Berlina właśnie kupiła…”, które ciągle się aktualizuje;
• przestarzałe elementy <marquee> lub <blink> w starych opisach produktów lub banerach.

Jak to sprawdzić

Automatycznie: nasz skaner zgłasza elementy <marquee> i <blink> (zob. biblioteka reguł). Karuzel, filmów oraz animacji CSS i JavaScript nie da się niezawodnie wykryć, więc większość tego kryterium wymaga kontroli ręcznej.

Ręcznie: załadować każdą kluczową stronę i odczekać co najmniej pięć sekund, niczego nie dotykając. Zanotować wszystko, co samo się porusza, przewija, miga lub aktualizuje. Dla każdego takiego elementu znaleźć przycisk pauzy, zatrzymania lub ukrycia, sprawdzić, czy jest widoczny i działa z klawiatury, oraz czy treść pozostaje zatrzymana.

Jak to naprawić

• Dodać do karuzel i filmów w tle widoczny, obsługiwany z klawiatury przycisk pauzy/odtwarzania; samo zatrzymywanie po najechaniu kursorem lub przy fokusie nie wystarcza wszystkim.
• Jeszcze lepiej zrezygnować z automatycznego przewijania: niech klienci sami przechodzą między slajdami.
• Respektować prefers-reduced-motion, aby zatrzymać zbędne animacje u użytkowników, którzy proszą o mniej ruchu.
• Usunąć <marquee> i <blink>, a przewijane paski zastąpić statycznym tekstem.
• Pozwolić użytkownikom zamknąć lub wyłączyć powiadomienia „social proof” na żywo.

Powiązane kryteria

• 2.3.1 Trzy błyski lub wartości poniżej progu — treść migająca a napady padaczkowe.
• 2.2.1 Dostosowanie czasu — limity czasu muszą dać się dostosować.
• 2.1.1 Klawiatura — przycisk pauzy musi działać z klawiatury.

Najczęstsze pytania

Czy automatycznie przewijana karuzela narusza WCAG 2.2.2?

Tylko wtedy, gdy uruchamia się sama, porusza się dłużej niż pięć sekund obok innej treści i nie daje możliwości pauzy, zatrzymania ani ukrycia. Rozwiązaniem jest widoczny przycisk pauzy działający z klawiatury.

Na czym polega zasada pięciu sekund w WCAG 2.2.2?

Treść ruchoma, migająca lub przewijana, która uruchamia się sama i trwa pięć sekund lub krócej, nie potrzebuje przycisku pauzy. Wszystko, co trwa dłużej i jest wyświetlane równolegle z inną treścią, go potrzebuje.

Czy 2.2.2 obejmuje filmy w tle i animowane GIF-y?

Tak, jeśli poruszają się automatycznie dłużej niż pięć sekund obok innej treści. Błyski, które mogą wywołać napady padaczkowe, to osobne kryterium, 2.3.1.