2.2.2 Pauza, zatrzymanie, ukrycie

/ Jak strony go nie spełniają

• Karuzela na stronie głównej zmienia slajdy na timerze i ma tylko strzałki wstecz i dalej, bez przycisku pauzy.
• Wideo w nagłówku strony odtwarza się w pętli za tytułem i nie ma kontrolki, która je zatrzymuje.
• Przewijany pasek z wiadomościami albo cenami biegnie bez przerwy u góry strony.
• Lista na żywo albo tablica wyników dokłada nowe pozycje na timerze i spycha w dół tekst, który użytkownik właśnie czyta.
• Przycisk pauzy istnieje, ale pokazuje się tylko po najechaniu myszą albo nie da się do niego dojść z klawiatury.

/ Jak sprawdzić samodzielnie

1. Wczytaj stronę i przez ponad pięć sekund nic nie rób. Zanotuj wszystko, co nadal się porusza, miga, przewija albo zmienia.
2. Przy każdej takiej treści poszukaj widocznej kontrolki pauzy, zatrzymania albo ukrycia i sprawdź, czy ma nazwę tekstową, a nie samą ikonę.
3. Dojdź do kontrolki klawiszem Tab i użyj jej klawiszem Enter albo spacją. Ruch ma się zatrzymać i nie ruszać ponownie, gdy fokus przejdzie dalej.
4. Sprawdź, czy wstrzymaną treść nadal da się przeczytać i czy reszta strony działa w czasie pauzy.

/ Jak to naprawić

• Dodaj do karuzeli prawdziwy element button, który wyłącza i włącza automatyczne odtwarzanie, z nazwą tekstową w rodzaju Wstrzymaj slajdy, i umieść go w DOM przed slajdami, żeby osoby korzystające z klawiatury trafiały na niego najpierw.
• Albo usuń automatyczne odtwarzanie. Karuzela, która rusza się tylko po naciśnięciu przycisku dalej, nie ma czego wstrzymywać.
• Do zapętlonego wideo dodaj atrybut controls albo przycisk pauzy, który wywołuje pause() na elemencie video.
• Zatrzymuj animacje CSS właściwością animation-play-state: paused, gdy użytkownik naciśnie kontrolkę, a paski i listy na żywo zatrzymuj, kasując ich timer.
• Spraw, by animacja dekoracyjna kończyła się w ciągu pięciu sekund: ustaw animation-iteration-count na skończoną liczbę i pilnuj, żeby łączny czas działania mieścił się w tym limicie.

/ Co sprawdza nasz skaner

Nasz test carousel-no-pause sprawdza do czterech widocznych obszarów oznaczonych aria-roledescription="carousel" albo mających w nazwie klasy słowo carousel lub slider. Przepuszcza obszar, w którym jest przycisk z nazwą albo klasą wspominającą o pauzie, zatrzymaniu lub odtwarzaniu, a pozostałe zgłasza, jeśli coś w środku animuje się bez końca albo ma przejście CSS dłuższe niż 0,3 sekundy. Nie mierzy czasu ruchu i nie sprawdza pasków, wideo ani list na żywo.