WCAG 2.1.2 Bez pułapki na klawiaturę

Kryterium sukcesu 2.1.2 chroni każdego, kto porusza się po stronie za pomocą klawiatury — użytkowników czytników ekranu, osoby z niepełnosprawnością ruchową, osoby korzystające z urządzeń przełącznikowych — przed utknięciem w jednej części strony. To poziom A i część normy EN 301 549 (punkt 9.2.1.2).

Czego wymaga kryterium

Jeśli fokus klawiatury można przenieść do komponentu za pomocą klawiatury, musi być możliwe przeniesienie fokusu poza ten komponent wyłącznie za pomocą klawiatury.

Jeśli wyjście wymaga czegoś więcej niż niezmodyfikowanych strzałek, klawisza Tab lub innych standardowych metod wyjścia, użytkownik musi zostać poinformowany, jak wyjść (np. „naciśnij Ctrl+M, aby opuścić edytor”).

WCAG dodaje uwagę: ponieważ pułapka może uniemożliwić korzystanie z całej strony, cała treść na stronie musi spełniać to kryterium, w tym osadzona treść zewnętrzna (to wymóg zgodności nr 5, nieingerencja).

Celowe utrzymywanie fokusu jest dozwolone. Okno modalne, które trzyma Tab w środku, dopóki jest otwarte, jest w porządku, o ile użytkownik może je zamknąć z klawiatury.

Typowe błędy w sklepie internetowym

• osadzone wideo, przeglądarka 3D produktu lub mapa, która przechwytuje Tab i nigdy go nie oddaje;
• widżet czatu lub pomocy w ramce iframe, do którego fokus wchodzi i nie może wrócić na stronę;
• skrypt „pułapki fokusu” w okienku (newsletter, koło rabatowe, weryfikacja wieku) bez sposobu zamknięcia z klawiatury;
• pole tekstu sformatowanego do opinii, w którym Tab wstawia wcięcie, a użytkownik nie dowiaduje się, jak z niego wyjść;
• kalendarz wyboru daty w procesie zamówienia, który trzyma fokus w siatce dni.

Jak to sprawdzić

Automatycznie: dla tego kryterium nie ma reguły axe-core. To, czy fokus może opuścić komponent, zależy od reakcji skryptów na klawisze, czego skan nie zasymuluje w wiarygodny sposób, więc potrzebna jest ręczna kontrola.

Ręcznie: zacząć od góry strony i naciskać Tab, aż do stopki, a potem Shift+Tab z powrotem w górę. Upewnić się, że w obu kierunkach przechodzi się przez każdy osadzony odtwarzacz, ramkę iframe, okienko i widżet. Otworzyć każde okno dialogowe i spróbować klawisza Esc i przycisku Zamknij. W razie utknięcia zanotować miejsce; jeśli komponent oferuje specjalny klawisz wyjścia, sprawdzić, czy jest on wyjaśniony na ekranie.

Jak to naprawić

• Nie przechwytywać Tab i Shift+Tab, chyba że celowo utrzymuje się fokus w otwartym oknie modalnym.
• Każde okno modalne lub okienko potrzebuje przycisku Zamknij, który może otrzymać fokus, i powinno zamykać się klawiszem Esc; potem fokus należy przywrócić do elementu, który je otworzył.
• Testować osadzenia zewnętrzne przed ich dodaniem, a te, które więżą fokus, zastąpić lub obudować.
• Jeśli komponent naprawdę potrzebuje klawisza Tab dla siebie (edytor kodu lub tekstu), pokazać krótką instrukcję, jak z niego wyjść.

Powiązane kryteria

• 2.1.1 Klawiatura — każda funkcja musi działać z klawiatury.
• 2.4.3 Kolejność fokusu — fokus musi przesuwać się w logicznej kolejności.
• 2.4.11 Fokus niezasłonięty (minimum) — element z fokusem nie może być całkowicie zasłonięty.

Najczęstsze pytania

Czym jest pułapka na klawiaturę?

Miejscem na stronie, do którego fokus klawiatury może wejść, ale nie może z niego wyjść za pomocą klawiatury, np. osadzony odtwarzacz wideo lub widżet, który przechwytuje klawisz Tab. Użytkownik utyka i często musi przeładować stronę.

Czy okno modalne, które trzyma fokus w środku, to pułapka na klawiaturę?

Nie, o ile użytkownik może je opuścić, np. klawiszem Esc lub osiągalnym przyciskiem Zamknij. Utrzymywanie fokusu wewnątrz otwartego okna modalnego to zalecany wzorzec; pułapka powstaje wtedy, gdy nie ma wyjścia.

Dlaczego 2.1.2 dotyczy każdej części strony?

Ponieważ jedna pułapka może zablokować całą stronę. WCAG zalicza 2.1.2 do wymogu nieingerencji, więc musi je spełniać cała treść, nawet ta, na której nie opiera się deklarowana zgodność.