WCAG 2.2.2: Wstrzymaj, Zatrzymaj, Ukryj

Co Oznacza Ta Zasada

WCAG 2.2.2 (Pause, Stop, Hide) to kryterium sukcesu na poziomie A w ramach zasady Operable. Dotyczy wszelkich treści, które poruszają się, migają, przewijają lub aktualizują automatycznie na stronie. Zasada ustanawia dwa odrębne wymagania w zależności od tego, jak zachowuje się treść:

Dla treści poruszającej się, migającej lub przewijanej, która uruchamia się automatycznie, trwa dłużej niż pięć sekund i jest prezentowana obok innej treści, użytkownik musi otrzymać mechanizm umożliwiający jej wstrzymanie, zatrzymanie lub ukrycie. Obejmuje to animacje CSS, karuzele sterowane JavaScriptem, tekst typu marquee, migające elementy, przewijane tickery i animowane banery.

Dla treści automatycznie aktualizowanej — takiej jak tablice wyników na żywo, tickery giełdowe, kanały mediów społecznościowych czy nagłówki wiadomości odświeżane w odstępach czasu — użytkownik musi mieć możliwość wstrzymania, zatrzymania, ukrycia lub kontrolowania częstotliwości aktualizacji.

Spełnienie wymagań oznacza, że dostępny jest wyraźnie obsługiwalny kontroler (przycisk, skrót klawiaturowy lub podobny mechanizm) przed animowaną treścią lub obok niej, pozwalający użytkownikom zamrozić ją lub usunąć bez konieczności korzystania z pomocy. Sam kontroler musi być dostępny — osiągalny z klawiatury, poprawnie opisany i możliwy do użycia bez myszy.

Niespełnienie wymagań ma miejsce, gdy występuje którakolwiek z następujących sytuacji: element <blink> lub CSS text-decoration: blink, którego nie można zatrzymać; element <marquee> bez mechanizmu pauzy; animowana karuzela odtwarzana w nieskończoność bez przycisku pauzy; automatycznie odświeżający się widget z wiadomościami, którego nie można kontrolować; lub zapętlone wideo w tle bez możliwości jego zatrzymania.

WCAG definiuje dwa wyraźne wyjątki. Po pierwsze, zasada nie dotyczy animacji trwających pięć sekund lub krócej, ponieważ krótki ruch, który sam się kończy, nie powoduje długotrwałego rozproszenia. Po drugie, nie dotyczy sytuacji, gdy animacja jest niezbędna dla danej aktywności — na przykład w interfejsie do handlu akcjami w czasie rzeczywistym, gdzie aktualne ceny są całym celem strony, a ich wstrzymanie zasadniczo zmieniłoby charakter treści. Te wyjątki są wąskie i nie powinny być używane jako ogólne usprawiedliwienie dla pomijania wdrożenia.

Dlaczego To Ma Znaczenie

Poruszająca się i migająca treść tworzy poważne bariery dla kilku odrębnych grup osób z niepełnosprawnościami, a konsekwencje wahają się od lekkiego rozproszenia po realną szkodę medyczną.

Osoby z zaburzeniem hiperaktywności z deficytem uwagi (ADHD) lub innymi niepełnosprawnościami poznawczymi często nie są w stanie skupić się na głównej treści strony, gdy w ich polu peryferyjnym znajdują się elementy animowane. Ludzki mózg jest neurologicznie zaprogramowany, by zwracać uwagę na ruch jako mechanizm przetrwania, a osoby z ADHD odczuwają to przyciąganie znacznie silniej niż użytkownicy neurotypowi. Przewijany ticker na dole strony z wiadomościami lub animowany baner reklamowy w panelu bocznym mogą sprawić, że czytanie głównego artykułu stanie się praktycznie niemożliwe.

Osoby z zaburzeniami przedsionkowymi — w tym z zapaleniem błędnika, łagodnym napadowym położeniowym zawrotem głowy (BPPV) i chorobą Ménière’a — mogą doświadczać nudności, zawrotów głowy i dezorientacji w kontakcie z określonymi rodzajami ruchu na ekranie. Dla tych użytkowników zapętlona karuzela lub efekt przewijania paralaksy nie są jedynie irytujące; mogą powodować fizyczne dolegliwości, które zmuszają ich do całkowitego opuszczenia strony. Zaburzenia przedsionkowe dotykają szacunkowo 35% dorosłych powyżej 40. roku życia tylko w samych Stanach Zjednoczonych.

Osoby z padaczką fotowrażliwą są narażone na napady w wyniku treści, które błyskają lub migają z określoną częstotliwością. Choć treści migoczące są bardziej bezpośrednio ujęte w WCAG 2.3.1, migająca treść objęta 2.2.2 również może być czynnikiem wyzwalającym. Światowa Organizacja Zdrowia szacuje, że padaczka dotyka około 50 milionów osób na całym świecie.

Dla użytkowników czytników ekranu automatycznie aktualizowana treść tworzy równie zakłócający problem. Gdy odświeża się region na żywo, czytniki ekranu ogłaszają nową treść, co przerywa użytkownikowi w połowie zdania, gdy słucha czegoś innego. Bez możliwości wstrzymania aktualizacji nawigacja po stronie z treścią na żywo staje się niezwykle trudna.

Rozważmy scenariusz z życia wzięty: użytkownik z ADHD wykonuje przelew bankowy online w tureckim portalu bankowości e-commerce. W nagłówku rotujący baner promocyjny zmienia cztery oferty co trzy sekundy. Użytkownik nie może skupić się na wpisaniu poprawnego numeru konta. Popełnia błąd przy przepisywaniu, przelew nie dochodzi do skutku i musi powtórzyć cały proces. Gdyby baner zawierał przycisk pauzy, zadanie byłoby proste. To nie jest hipotetyczny przykład — to udokumentowana kategoria błędów interakcji, z którymi audytorzy dostępności spotykają się regularnie.

Poza dostępnością dla osób z niepełnosprawnościami, eliminacja niekontrolowanego ruchu poprawia użyteczność dla wszystkich, zmniejsza obciążenie poznawcze i może poprawić sygnały SEO, takie jak wyniki Core Web Vitals, poprzez redukcję przesunięć układu i zbędnego wykonywania JavaScript.

Powiązane Reguły Axe-core

• blink: Ta reguła sprawdza obecność przestarzałego elementu HTML <blink> oraz właściwości CSS, które powodują miganie tekstu (historycznie text-decoration: blink). Element <blink> sprawia, że tekst miga w sposób ciągły, bez natywnego mechanizmu umożliwiającego użytkownikowi jego zatrzymanie. Axe oznacza każdą instancję tego elementu jako naruszenie, ponieważ bezpośrednio nie spełnia on 2.2.2 — nie istnieje zgodny przypadek użycia <blink>. Reguła ostrzega również przed efektami migania sterowanymi przez CSS, w których animacji nie można wstrzymać. Automatyczne wykrywanie jest tu wiarygodne, ponieważ element i właściwość są składniowo identyfikowalne w DOM i w stylach obliczonych.
• marquee: Ta reguła sprawdza obecność elementu HTML <marquee>, który powoduje poziome lub pionowe przewijanie tekstu lub treści na ekranie w ciągłej pętli. Element <marquee> nie ma wbudowanego, dostępnego mechanizmu pauzy i jest przestarzały w HTML5. Axe oznacza każdą instancję jako naruszenie. Podobnie jak <blink>, wykrywanie jest proste, ponieważ element jest składniowo identyfikowalny. Jednak narzędzia automatyczne nie mogą wykryć wszystkich naruszeń 2.2.2 — animacje CSS, karuzele JavaScript, automatycznie aktualizowane widgety AJAX i zapętlone wideo HTML5 wymagają ręcznego przeglądu, ponieważ mechanizm pauzy (lub jego brak) może zostać określony wyłącznie przez testera-ludzi oceniającego pełne doświadczenie interaktywne.

Jak Testować

1. Automatyczne skanowanie za pomocą axe DevTools lub Lighthouse: Otwórz stronę w Chrome lub Firefox. Otwórz DevTools (F12), przejdź do panelu axe DevTools lub audytu Accessibility w Lighthouse i uruchom pełne skanowanie. Szukaj w szczególności naruszeń oznaczonych jako blink lub marquee w wynikach. Każde naruszenie będzie zawierać węzeł DOM, poziom wpływu (poważny lub krytyczny) oraz link do wskazówek naprawczych. Zwróć uwagę, że czyste skanowanie automatyczne nie oznacza pełnej zgodności — przejdź do kroków ręcznych.
2. Ręczna inspekcja animacji CSS i JavaScript: Wizualnie przejrzyj stronę pod kątem treści, które poruszają się, przewijają, migają lub aktualizują automatycznie. Dla każdej instancji sprawdź, czy istnieje kontroler pauzy, zatrzymania lub ukrycia, który jest obecny i widoczny przed animowaną treścią lub obok niej. Zweryfikuj, że kontroler jest osiągalny z klawiatury (przejdź do niego klawiszem Tab) i że naciśnięcie Enter lub Spacji go aktywuje. Sprawdź, czy aktywacja kontrolera faktycznie zatrzymuje ruch, a nie tylko go spowalnia.
3. Test wyłącznie z klawiaturą: Odłącz mysz. Użyj klawisza Tab, aby nawigować po całej stronie. Potwierdź, że możesz dotrzeć do kontrolera pauzy/zatrzymania dla każdego elementu animowanego, używając wyłącznie klawiatury, oraz że kontroler ma widoczny wskaźnik fokusu. Jeśli nie możesz dotrzeć do kontrolera lub jeśli dotarcie do niego wymaga najpierw przejścia Tabem przez animowaną treść (co może być dezorientujące), jest to błąd.
4. Test z czytnikiem ekranu przy użyciu NVDA i Firefox: Uruchom NVDA, otwórz stronę w Firefox i słuchaj wszelkich ogłoszeń regionów na żywo, które przerywają czytanie. Przejdź do automatycznie aktualizowanej treści i potwierdź, że użycie kontrolera pauzy wycisza ogłoszenia NVDA. Przetestuj z JAWS i Chrome oraz VoiceOver i Safari na macOS, stosując tę samą procedurę.
5. Kontrola treści automatycznie aktualizowanej: Dla treści odświeżanej w określonych odstępach czasu (kanały wiadomości, pulpity, tablice wyników) zanotuj interwał odświeżania. Potwierdź, że istnieje mechanizm wstrzymania aktualizacji lub kontrolowania częstotliwości. Jeśli to możliwe, wywołaj aktualizację ręcznie i zweryfikuj, że czytniki ekranu ogłaszają ją tylko wtedy, gdy użytkownik tego chce, a nie mimowolnie.
6. Test preferencji ograniczonego ruchu: W systemie operacyjnym włącz ustawienie dostępności „Reduce Motion” (Ogranicz ruch). Przeładuj stronę i sprawdź, czy animacje respektują zapytanie medialne CSS prefers-reduced-motion. Choć nie jest to bezpośrednio wymagane przez WCAG 2.2.2, stanowi silną technikę uzupełniającą i jest coraz częściej oczekiwane przez audytorów.

Jak Naprawić

Przestarzały element <marquee> — Niepoprawne

<!-- Scrolling text with no pause control; fails 2.2.2 -->
<marquee behavior='scroll' direction='left'>
  Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
</marquee>

Przestarzały element <marquee> — Poprawne

<!-- Replaced with a CSS animation that respects prefers-reduced-motion
     and includes an accessible pause button -->
<div class='ticker-wrapper'>
  <button
    id='ticker-toggle'
    aria-label='Pause news ticker'
    aria-pressed='false'
    onclick='toggleTicker()'
  >
    Pause
  </button>
  <div class='ticker' id='news-ticker' aria-live='off' aria-atomic='false'>
    <p class='ticker-content'>
      Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
    </p>
  </div>
</div>

<!-- The CSS should define .ticker-content with animation,
     and a .paused class that sets animation-play-state: paused.
     The JS toggleTicker() function adds/removes .paused
     and updates aria-pressed and aria-label accordingly. -->

Przestarzały element <blink> — Niepoprawne

<!-- Blink element causes continuous unstoppable flashing; fails 2.2.2 -->
<p>Your session will expire soon. <blink>Please save your work!</blink></p>

Przestarzały element <blink> — Poprawne

<!-- Static, high-contrast warning with role='alert' for screen readers.
     No blinking required to communicate urgency. -->
<p>
  Your session will expire soon.
  <strong role='alert'>Please save your work!</strong>
</p>

Automatycznie odtwarzana karuzela bez kontrolera pauzy — Niepoprawne

<!-- Carousel advances every 4 seconds with no way to stop it; fails 2.2.2 -->
<div class='carousel' data-autoplay='true' data-interval='4000'>
  <div class='slide active'><img src='promo1.jpg' alt='Summer Sale'></div>
  <div class='slide'><img src='promo2.jpg' alt='New Arrivals'></div>
  <div class='slide'><img src='promo3.jpg' alt='Free Shipping'></div>
</div>

Automatycznie odtwarzana karuzela bez kontrolera pauzy — Poprawne

<!-- Carousel includes a visible, keyboard-accessible pause button.
     The aria-label updates dynamically to reflect current state.
     Autoplay also stops on focus/hover (WCAG best practice). -->
<div
  class='carousel'
  id='promo-carousel'
  aria-roledescription='carousel'
  aria-label='Promotional offers'
>
  <button
    id='carousel-pause'
    aria-label='Pause carousel'
    aria-pressed='false'
    class='carousel-pause-btn'
  >
    <!-- SVG pause icon or text label -->
    Pause
  </button>
  <div
    class='carousel-track'
    aria-live='off'
  >
    <div
      class='slide active'
      role='group'
      aria-roledescription='slide'
      aria-label='1 of 3'
    >
      <img src='promo1.jpg' alt='Summer Sale — up to 50% off selected items'>
    </div>
    <div
      class='slide'
      role='group'
      aria-roledescription='slide'
      aria-label='2 of 3'
    >
      <img src='promo2.jpg' alt='New Arrivals — browse the latest collection'>
    </div>
  </div>
</div>

Automatycznie aktualizowany widget danych na żywo — Niepoprawne

<!-- Widget refreshes every 10 seconds via JS with no user control; fails 2.2.2 -->
<div id='stock-widget' aria-live='polite'>
  <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
</div>

Automatycznie aktualizowany widget danych na żywo — Poprawne

<!-- Widget includes a pause button; aria-live is set to 'off' when paused
     so screen readers are not interrupted during paused state. -->
<div class='stock-widget-container'>
  <button
    id='stock-pause'
    aria-label='Pause stock updates'
    aria-pressed='false'
  >
    Pause updates
  </button>
  <div id='stock-widget' aria-live='polite' aria-atomic='true'>
    <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
  </div>
</div>
<!-- JS should toggle aria-live between 'polite' and 'off',
     stop the setInterval timer when paused, and update
     aria-pressed and aria-label on the button accordingly. -->

Typowe Błędy

• Używanie elementów <marquee> lub <blink> w jakimkolwiek miejscu w produkcyjnym HTML, nawet dla „retro” lub dekoracyjnego stylu — oba elementy są przestarzałe, semantycznie bez znaczenia i zawsze nie spełniają 2.2.2, bez innej drogi naprawy niż ich usunięcie.
• Dodanie przycisku pauzy, który jest widoczny tylko przy najechaniu myszą, co czyni go niedostępnym dla użytkowników korzystających wyłącznie z klawiatury, którzy najbardziej go potrzebują i którzy zazwyczaj nawigują za pomocą Tab, a nie najeżdżania.
• Implementacja przycisku pauzy, który nie jest osiągalny klawiszem Tab przed animowaną treścią w DOM, zmuszając użytkowników do nawigowania przez dezorientujący ruch, zanim będą mogli go zatrzymać.
• Użycie animation-play-state: paused w CSS, aby wizualnie zatrzymać animację, bez równoczesnego wyłączenia pętli JavaScript setInterval lub requestAnimationFrame, która steruje aktualizacjami treści — wygląd wizualny się zatrzymuje, ale DOM nadal się zmienia, wciąż przerywając czytnikom ekranu.
• Ustawienie aria-live='polite' na karuzeli lub tickerze i pozostawienie go aktywnym nawet wtedy, gdy użytkownik nacisnął pauzę — region na żywo nadal ogłasza zmiany DOM użytkownikom czytników ekranu, mimo że animacja wizualna jest zamrożona.
• Poleganie na autoplay=false w elemencie <video> bez weryfikacji zachowania w różnych przeglądarkach; niektóre kombinacje przeglądarek i wtyczek nadpisują ten atrybut, powodując automatyczne odtwarzanie wideo wbrew intencji autora i oczekiwaniom użytkownika.
• Traktowanie wyjątku pięciu sekund jako ogólnego okresu tolerancji i budowanie karuzeli, która pokazuje każdy slajd przez cztery sekundy w założeniu, że każda pojedyncza zmiana slajdu trwa mniej niż pięć sekund — animacja jako całość jest ciągła i trwa znacznie dłużej niż pięć sekund, więc wyjątek nie ma zastosowania.
• Zapewnienie kontrolera pauzy, który zatrzymuje animację, ale nie wskazuje wizualnie stanu pauzy, pozostawiając użytkowników w niepewności, czy ich działanie odniosło skutek — przycisk musi odzwierciedlać swój aktualny stan, najlepiej używając aria-pressed i aktualizując etykietę między „Pause” i „Play”.
• Zastosowanie prefers-reduced-motion wyłącznie do przejść CSS i ignorowanie animacji sterowanych JavaScriptem, które działają niezależnie od CSS, co oznacza, że użytkownicy, którzy włączyli systemowe ustawienie ograniczenia ruchu, nadal doświadczają ruchu na stronie.
• Umieszczenie kontrolera pauzy poza kolejnością tabulacji klawiatury poprzez ustawienie tabindex='-1' lub umieszczenie go w kontenerze z display:none, który jest warunkowo pokazywany tylko przy interakcji myszą — kontroler musi być zawsze osiągalny za pomocą nawigacji klawiaturą.

Związek z Tureckimi Regulacjami Dotyczącymi Dostępności

Prezydencki Okólnik Turcji nr 2025/10, opublikowany w Dzienniku Urzędowym (Resmî Gazete) o numerze 32933 w dniu 21 czerwca 2025 r., ustanawia obowiązkowe wymagania dotyczące dostępności stron internetowych i aplikacji mobilnych, zgodne z WCAG 2.2. WCAG 2.2.2 Pause, Stop, Hide jest kryterium poziomu A, co oznacza, że znajduje się na najbardziej fundamentalnym poziomie zgodności i jest obowiązkowe bez wyjątku dla wszystkich podmiotów objętych okólnikiem.

Okólnik określa stopniowe terminy osiągnięcia zgodności: instytucje i organy publiczne muszą osiągnąć pełną zgodność na poziomie A w ciągu jednego roku od daty publikacji okólnika, a podmioty sektora prywatnego muszą to zrobić w ciągu dwóch lat. Nie ma dobrowolnego przystąpienia — okólnik nakłada obowiązek prawny, a niezgodne z nim zasoby cyfrowe podlegają nadzorowi administracyjnemu i potencjalnym działaniom egzekucyjnym.

Podmioty objęte okólnikiem obejmują szeroki przekrój tureckich usług cyfrowych: wszystkie instytucje publiczne i organy rządowe; platformy e-commerce działające w Turcji; banki i instytucje usług finansowych; szpitale i prywatnych świadczeniodawców opieki zdrowotnej; operatorów telekomunikacyjnych z 200,000 lub większą liczbą abonentów; biura podróży; prywatne firmy transportowe; oraz szkoły prywatne posiadające upoważnienie Ministerstwa Edukacji Narodowej (Millî Eğitim Bakanlığı, MoNE).

Dla tych podmiotów WCAG 2.2.2 ma bezpośrednie i praktyczne konsekwencje. Serwis e-commerce z automatycznie odtwarzaną karuzelą produktów bez przycisku pauzy narusza przepisy. Portal bankowości internetowej banku, który używa przewijanego tickera z komunikatami bezpieczeństwa bez kontrolera zatrzymania, jest niezgodny. Strona rezerwacji wizyt szpitala, która używa animowanych alertów, których nie można zatrzymać, nie spełnia wymagań. Strona główna firmy telekomunikacyjnej z zapętlonym wideo w tle i bez widocznego kontrolera zatrzymania musi zostać naprawiona przed upływem terminu.

Poza obowiązkiem prawnym, tureckie prawo dotyczące dostępności jest zgodne z szerszym trendem europejskim, którego przykładem są unijna Dyrektywa w sprawie dostępności stron internetowych i mobilnych aplikacji organów sektora publicznego oraz Europejski Akt o Dostępności (EAA). W miarę jak tureckie firmy rozszerzają działalność na rynki europejskie lub obsługują użytkowników europejskich, zgodność z WCAG 2.2 na poziomie A — w tym kryterium 2.2.2 — staje się podwójnym wymogiem zgodności. Prawidłowe wdrożenie Pause, Stop, Hide jest zatem zarówno krajową koniecznością prawną, jak i strategicznym atutem dla tureckich organizacji o międzynarodowej obecności cyfrowej.