2.2.2 Pauza, zatrzymanie, ukrycie

Krótko

Jeśli treść porusza się, miga, przewija albo automatycznie aktualizuje równolegle z inną treścią, użytkownik musi móc ją zatrzymać, wstrzymać, ukryć albo kontrolować częstotliwość aktualizacji.

Problem w praktyce

Na stronie kursu automatycznie przewija się pasek komunikatów, a obok użytkownik czyta instrukcję. Ruch odciąga uwagę i utrudnia skupienie. Na stronie banku panel kursów walut odświeża się co kilka sekund i zmienia treść, gdy użytkownik próbuje ją przeczytać czytnikiem ekranu.

To kryterium nie dotyczy animacji uruchamianych ruchem urządzenia. Nie dotyczy też każdego efektu wizualnego, tylko ruchu, migania, przewijania albo autoaktualizacji spełniających warunki WCAG.

Kogo to dotyczy

• Osób z trudnościami koncentracji i uwagi.
• Osób z niepełnosprawnościami poznawczymi, które potrzebują stabilnej treści.
• Osób korzystających z czytników ekranu, gdy treść automatycznie się zmienia.
• Osób słabowidzących, które potrzebują więcej czasu na odczyt ruchomego tekstu.

Dobry przykład

• Karuzela ma przycisk „Pauza” i nie rusza ponownie bez decyzji użytkownika.
• Pasek przewijanych aktualności można zatrzymać.
• Panel wyników na żywo pozwala wstrzymać aktualizację albo zmienić częstotliwość.
• Migający baner zatrzymuje się po maksymalnie 5 sekundach albo ma mechanizm zatrzymania.

Zły przykład

• Karuzela przesuwa slajdy automatycznie bez przycisku pauzy.
• Pasek z promocjami przewija się cały czas i nie da się go zatrzymać.
• Wyniki sportowe aktualizują się co sekundę bez kontroli częstotliwości.
• Element miga dłużej niż 5 sekund i nie ma mechanizmu zatrzymania.

Przykłady kodu

<section>
  <h2>Aktualności</h2>
  <button type="button">Pauzuj przewijanie aktualności</button>
  <ul>
    <li>Nowy termin szkolenia: 12 czerwca</li>
    <li>Zapisy trwają do 5 czerwca</li>
  </ul>
</section>

<label for="refresh-rate">Odświeżaj dane</label>
<select id="refresh-rate" name="refresh-rate">
  <option>Ręcznie</option>
  <option>Co 30 sekund</option>
  <option>Co 5 minut</option>
</select>

<div class="auto-carousel">
  <p>Slajdy zmieniają się automatycznie co 3 sekundy.</p>
</div>

Przykład graficzny

Jak sprawdzić

1. Znajdź ruchome, migające, przewijane i automatycznie aktualizowane elementy.
2. Sprawdź, czy startują automatycznie i działają równolegle z inną treścią.
3. Dla ruchu, migania i przewijania sprawdź, czy trwają dłużej niż 5 sekund.
4. Sprawdź, czy użytkownik może je zatrzymać, wstrzymać albo ukryć.
5. Dla autoaktualizacji sprawdź, czy można ją wstrzymać albo kontrolować częstotliwość.

Co sprawdzi automat, a czego nie

Automat może wykryć

• część animacji CSS i skryptów aktualizujących treść,
• brak widocznych kontrolek przy karuzeli,
• elementy typu ticker, slider albo auto-refresh.

Automat nie oceni pewnie

• czy ruch jest istotny dla aktywności,
• czy kontrolka pauzy realnie działa,
• czy aktualizacja przeszkadza konkretnej treści i użytkownikowi.

Typowe błędy

• Karuzela bez przycisku pauzy.
• Przewijany pasek newsów bez zatrzymania.
• Automatyczne odświeżanie danych bez opcji „ręcznie”.
• Migający baner reklamowy działający przez cały czas.

Powiązane kryteria

• 2.2.1 Możliwość dostosowania czasu: gdy automatyczne zmiany tworzą limit czasu na odczyt lub reakcję.
• 2.3.1 Trzy błyski lub wartości poniżej progu: gdy problemem są błyski mogące wywołać napad.
• 2.5.4 Aktywowanie ruchem: gdy funkcja uruchamia się ruchem urządzenia lub użytkownika.

Źródła

• WCAG 2.2: 2.2.2 Pause, Stop, Hide (otwiera się w nowym oknie)
• Understanding WCAG 2.2.2: Pause, Stop, Hide (otwiera się w nowym oknie)
• How to Meet WCAG 2.2.2: Pause, Stop, Hide (otwiera się w nowym oknie)
• G4: Allowing the content to be paused and restarted from where it was paused (otwiera się w nowym oknie)
• F16: Failure due to scrolling content without a pause mechanism (otwiera się w nowym oknie)