Wróć do wszystkich kryteriów

2.2.2 Pauza, stop, ukryj (ang.) Pause, Stop, Hide

Specjalizacje:

  • Designer
  • Deweloper

Elementy:

  • Cała strona / widok
  • Dialogi i warstwy
  • Multimedia

Poziomy:

  • A

Spis treści

    Istota i cel kryterium

    Głównym celem tego kryterium jest zapewnienie użytkownikom kontroli nad dynamiczną treścią, która pojawia się równolegle z innymi informacjami na stronie. Mechanizmy kontrolne są wymagane dla dwóch głównych kategorii treści:

    1. Ruch, miganie, przewijanie: Jeśli startują automatycznie i trwają dłużej niż 5 sekund.
    2. Automatyczne aktualizacje: Jeśli startują automatycznie (tutaj zasada 5 sekund nie obowiązuje – kontrola wymagana jest od początku).

    Zastosuj tę wytyczną, aby uniknąć rozpraszania uwagi osób, które muszą w pełni skoncentrować się na czytanej treści. Pięciosekundowy limit został dobrany tak, aby dać czas na przyciągnięcie uwagi, ale nie uniemożliwić korzystania z reszty strony.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#pause-stop-hide

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#pauza-zatrzymanie-ukrycie

    Słownik pojęć

    Treść migająca (ang.) Blinking content
    –

    Elementy cyklicznie pojawiające się i znikające (np. migający tekst).

    Treść automatycznie aktualizująca się (ang.) Auto-updating content
    –

    Dane odświeżane w czasie rzeczywistym, np. kursy walut, prognoza pogody.

    Treść poruszająca się (ang.) Moving content
    –

    Elementy zmieniające swoje położenie, jak slidery czy banery.

    Wpływ na dostępność (Kogo wspierasz?)

    • Osoby z zaburzeniami koncentracji i ADHD: Ruchome obiekty odciągają ich uwagę od głównego celu wizyty, co czyni stronę trudną w odbiorze.
    • Użytkownicy z zaburzeniami poznawczymi: Potrzebują oni więcej czasu na przetworzenie informacji; zbyt szybko znikający tekst jest dla nich nieczytelny.
    • Osoby z niepełnosprawnością motoryczną: Kliknięcie w mały przycisk na karuzeli, która sama zmienia slajdy, może być niewykonalne przy użyciu trackballa lub myszy głowowej.
    • Użytkownicy czytników ekranu: Dynamiczne zmiany mogą kolidować z odczytywaniem treści przez technologie asystujące.
    • Osoby słabowidzące: Korzystając z dużych powiększeń ekranu, mogą łatwo „zgubić” ruchomy element, który ucieka poza obszar widzenia.
    • Osoby z zaburzeniami błędnika: Niektóre animacje mogą powodować u nich zawroty głowy lub nudności.

    Zasady wdrażania i wymagania techniczne

    Dla treści dynamicznych prezentowanych równolegle z innymi informacjami musisz zapewnić co najmniej jeden mechanizm:

    1. Wstrzymaj ((ang.) Pause): Użytkownik zatrzymuje ruch i wznawia go (w czasie rzeczywistym lub od momentu przerwania).
    2. Zatrzymaj ((ang.) Stop): Trwałe zatrzymanie ruchu.
    3. Ukryj ((ang.) Hide): Całkowite usunięcie elementu z widoku.

    Pamiętaj o dostępności technicznej kontrolek: muszą być one obsługiwane klawiaturą, posiadać wyraźne etykiety (np. aria-label) i być widoczne bez konieczności najechania myszką na element.

    Wyjątki i sytuacje szczególne

    Zasada nie obowiązuje, gdy ruch lub aktualizacja są niezbędne dla działania strony. Przykładem mogą być:

    • animowane testy wydajnościowe,
    • gry zręcznościowe,
    • animacje ładowania danych ((ang.) preloader), gdzie animacja informuje o pracy systemu.

    Przykłady implementacji

    Najczęstsze błędy

    • F16: Brak mechanizmu wstrzymywania dla treści przewijanych, gdzie ruch nie jest niezbędny.
    • F112: Użycie migania trwającego dłużej niż 5 sekund bez opcji jego wyłączenia.
    • F50: Wykorzystanie skryptu wywołującego efekt migania, który nie posiada wbudowanego mechanizmu zatrzymującego ten proces po upływie maksymalnie 5 sekund.
    • F7: Wykorzystanie obiektów lub apletów (np. (ang.) Java, (ang.) Flash), które wyświetlają ruchomą lub migającą treść przez czas dłuższy niż 5 sekund bez udostępnienia użytkownikowi opcji kontroli.
    • Automatyczne odświeżanie bez kontroli: Brak możliwości zmiany częstotliwości aktualizacji danych giełdowych lub pogodowych, co uniemożliwia spokojne zapoznanie się z treścią.
    • Kontrolki widoczne po najechaniu ((ang.) Hover-only): Przycisk pauzy widoczny wyłącznie po najechaniu kursorem myszy, co sprawia, że jest on nieosiągalny dla osób korzystających wyłącznie z klawiatury.

    Najlepsze praktyki

    • Domyślne wstrzymanie: Projektuj komponenty tak, aby karuzele i aktualizacje były domyślnie zatrzymane.
    • Wybór trybu wznowienia: Dla danych rzeczywistych (np. aukcje) po wstrzymaniu wznawiaj w czasie rzeczywistym. Dla artykułów wznawiaj od miejsca przerwania.
    • Wsparcie dla @media (prefers-reduced-motion) : Wykorzystaj media w CSS, aby automatycznie wyłączać animacje u osób, które mają taką preferencję w systemie
    • Wyraźna informacja o zmianach: W kanałach wiadomości stosuj aria-live, aby czytniki ekranu mogły powiadomić o nowych danych po ich odświeżeniu.
    • Ograniczenie czasu animacji: Używaj plików GIF zatrzymujących się po określonej liczbie cykli (poniżej 5s).

    Metody testowania

    • Narzędzie deweloperskie (ang.) Developer Tools: Zweryfikuj, czy mechanizm pauzy faktycznie wstrzymuje renderowanie animacji w drzewie DOM.
    • NVDA: Sprawdź, czy przyciski sterujące są poprawnie ogłaszane i czy nie są pomijane w trybie nawigacji.
    • Testowanie manualne: Użyj stopera, aby sprawdzić, czy migające elementy zatrzymują się automatycznie przed upływem 5 sekund.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 5 przykładów interfejsu zawierających animacje, przewijanie, miganie lub odświeżające się dane. Twoim zadaniem jest ocenić, czy użytkownik ma nad nimi odpowiednią kontrolę.

    Jak to sprawdzić?

    1. Sprawdź, czy animacja, miganie lub ruch trwa dłużej niż 5 sekund.
    2. Jeśli tak, poszukaj mechanizmu, który pozwala wstrzymać (pauza), zatrzymać (stop) lub ukryć ten element.
    3. W przypadku danych aktualizujących się automatycznie (np. giełda), sprawdź czy można zatrzymać odświeżanie.
    4. Zwróć uwagę, czy kontrolki są dostępne z klawiatury.

    Wskazówka: Elementy trwające krócej niż 5 sekund nie wymagają przycisku pauzy (choć jest to dobra praktyka).
    Notatka: Zanim zajrzysz do rozwiązania, przetestuj i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: Stoper/Analiza zachowania, Klawiatura, Narzędzie deweloperskie (ang.) Developer Tools, NVDA

    Link: https://pdc.ambiscale.com/training/wcag-2-2-2/

    #1 BŁĄD

    Problem: Tekst miga nieskończenie długo bez możliwości jego zatrzymania.
    Dlaczego: Miganie trwające powyżej 5 sekund może rozpraszać użytkowników z zaburzeniami koncentracji (np. ADHD) i utrudniać im czytanie reszty strony.
    Naprawa: Zatrzymaj miganie automatycznie po 5 sekundach za pomocą CSS (np. animation-iteration-count) lub dodaj przycisk do jego wyłączenia.

    #2 DOBRZE

    Dlaczego: Dane aktualizują się automatycznie, ale użytkownik ma do dyspozycji wyraźny przycisk „Wstrzymaj”. Dzięki temu osoby, które potrzebują więcej czasu na przeczytanie kwoty lub używają czytnika ekranu, mogą zatrzymać odświeżanie.

    #3 BŁĄD

    Problem: Karuzela zmienia slajdy automatycznie i nie posiada przycisku pauzy. Nie zatrzymuje się również po najechaniu myszką ani po przeniesieniu fokusu z klawiatury.
    Dlaczego: Ruchome elementy odciągają uwagę, a użytkownicy czytający wolniej mogą nie zdążyć zapoznać się z treścią slajdu przed jego zniknięciem.
    Naprawa: Dodaj widoczny przycisk „Pauza/Odtwórz” sterujący karuzelą.

    #4 DOBRZE

    Dlaczego: Animacja samochodu trwa tylko 4 sekundy, po czym trwale się zatrzymuje. Zgodnie z kryterium 2.2.2, ruchome treści trwające krócej niż 5 sekund nie wymagają mechanizmu wstrzymywania.

    #5 BŁĄD

    Problem: Tekst przewija się (scrolluje) w nieskończoność bez możliwości zatrzymania.
    Dlaczego: Osoby słabowidzące lub mające trudności z czytaniem mogą nie nadążyć za uciekającym tekstem.
    Naprawa: Dodaj przycisk pauzy obok paska informacyjnego lub zrezygnuj z animacji na rzecz statycznego tekstu.

    Źródła

    • Abou-Zahra S., Eggert E., Vanderheiden G. [i in.] (red.), „2.2.2 Pause, Stop, Hide Level A”, [w:] Web Content Accessibility Guidelines (WCAG) 2.2 Quick Reference, 2025, https://www.w3.org/WAI/WCAG22/quickref/#pause-stop-hide [dostęp: 15.05.2026].
    • Accessibility Guidelines Working Group Participants, „Understanding SC 2.2.2 Pause, Stop, Hide (Level A)”, [w:] WCAG 2.2 Understanding Docs, 2026, https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html [dostęp: 15.05.2026].
    • Accessibility Guidelines Working Group Participants, „Technique F16: Failure of Success Criterion 2.2.2 due to including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content”, [w:] Techniques for WCAG 2.2, 2025, https://www.w3.org/WAI/WCAG22/Techniques/failures/F16 [dostęp: 15.05.2026].
    • Accessibility Guidelines Working Group Participants, „Technique F112: Failure of Success Criterion 2.2.2 due to using blinking content that lasts for more than five seconds without a mechanism to stop it”, [w:] Techniques for WCAG 2.2, 2026, https://www.w3.org/WAI/WCAG22/Techniques/failures/F112 [dostęp: 15.05.2026].
    • Accessibility Guidelines Working Group Participants, „Technique F50: Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without a mechanism to stop the blinking at 5 seconds or less”, [w:] Techniques for WCAG 2.2, 2026, https://www.w3.org/WAI/WCAG22/Techniques/failures/F50 [dostęp: 15.05.2026].
    • Accessibility Guidelines Working Group Participants, „Technique F7: Failure of Success Criterion 2.2.2 due to an object or applet that has blinking content without a mechanism to pause the content that blinks for more than five seconds”, [w:] Techniques for WCAG 2.2, 2025, https://www.w3.org/WAI/WCAG22/Techniques/failures/F7 [dostęp: 15.05.2026].
    • World Wide Web Consortium (W3C), „Kryterium sukcesu 2.2.2 Pauza, zatrzymanie, ukrycie”, [w:] Web Content Accessibility Guidelines (WCAG) 2.1, tłum. Fundacja Instytut Rozwoju Regionalnego, 2021, https://www.w3.org/Translations/WCAG21-pl/#pauza-zatrzymanie-ukrycie [dostęp: 15.05.2026].
    • DOCK sp. z o.o., WCAG 2.2.2: Wstrzymaj, Zatrzymaj, Ukryj, https://wcag.dock.codes/pl/dokumentacja/wcag-222/ [dostęp: 15.05.2026].

    Dodatkowe linki

    Wróć do wszystkich kryteriów