WCAG 2.1.2 Bez pułapki na klawiaturę (A) · aktualizacja
Pułapka klawiatury: gdy klawiszem Tab nie da się wyjść z elementu
Pułapka klawiatury to miejsce, z którego nie da się wyjść klawiszem Tab ani innym standardowym sposobem. To błąd poziomu A (WCAG 2.1.2), czyli jeden z najpoważniejszych: osoba bez myszy utyka i nie dokończy zakupu. Okno modalne może trzymać fokus w środku, ale tylko jeśli zamyka się klawiszem Escape.
Komu to przeszkadza
Każdy, kto korzysta wyłącznie z klawiatury. Dla niego pułapka w widżecie czatu na dole strony oznacza, że reszta sklepu przestaje istnieć, dopóki nie przeładuje strony.
Skąd się bierze
- Widżet czatu albo opinii, który przechwytuje klawisz Tab.
- Okno z promocją, które nie reaguje na Escape i nie ma przycisku zamknięcia dostępnego z klawiatury.
- Osadzony odtwarzacz wideo albo mapa, z której fokus nie wraca na stronę.
- Własny skrypt „zapętlający" fokus w menu, bez możliwości wyjścia.
Poprawka w kodzie
Przed
dialog.addEventListener('keydown', (e) => {
if (e.key === 'Tab') { e.preventDefault(); /* fokus nigdy nie wychodzi */ }
});Po
dialog.addEventListener('keydown', (e) => {
if (e.key === 'Escape') { zamknijOkno(); przyciskOtwierajacy.focus(); }
});
// albo natywnie: <dialog> + dialog.showModal()Natywny element dialog z metodą showModal() sam obsługuje Escape i trzymanie fokusu. To najprostsza droga do poprawnego okna.
Jak sprawdzić to samodzielnie
- Odłóż mysz. Naciskaj Tab od początku do końca strony.
- Jeśli fokus krąży w jednym miejscu, naciśnij Escape. Jeśli to nie pomaga, znalazłeś pułapkę.
- Sprawdź szczególnie widżety zewnętrzne: czat, opinie, płatności, mapy, filmy.
Co wykryje skaner, a czego nie
Skaner wykryje
Axe nie wykrywa pułapek. Dostepli przechodzi stronę klawiszem Tab i rozpoznaje zamknięty cykl fokusu. Jeśli cykl jest w oknie modalnym, sprawdza, czy Escape je zamyka.
Wymaga sprawdzenia przez człowieka
Automat przechodzi tylko pierwsze kilkadziesiąt elementów i nie otwiera wszystkich okien. Pułapka ukryta głęboko w procesie zamówienia wymaga ręcznego przejścia tej ścieżki.
Najczęstsze pytania
Czy okno modalne, które trzyma fokus w środku, to pułapka?
Nie, jeśli da się je zamknąć klawiaturą, zwykle klawiszem Escape albo przyciskiem „Zamknij" dostępnym z Tab. Trzymanie fokusu w oknie jest wtedy wręcz zalecane.
Co zrobić, jeśli pułapkę powoduje zewnętrzny widżet?
Zgłoś to dostawcy widżetu i poproś o poprawkę. Do tego czasu rozważ wyłączenie widżetu albo ładowanie go dopiero po kliknięciu.
Źródła
- [1] Understanding Success Criterion 2.1.2W3C Web Accessibility Initiative (WAI)
- [2] Web Content Accessibility Guidelines (WCAG) 2.2W3C (World Wide Web Consortium)
- [3] Understanding Success Criterion 2.4.7W3C Web Accessibility Initiative (WAI)