Wszystkie błędy WCAG

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

  1. Odłóż mysz. Naciskaj Tab od początku do końca strony.
  2. Jeśli fokus krąży w jednym miejscu, naciśnij Escape. Jeśli to nie pomaga, znalazłeś pułapkę.
  3. 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. [1] Understanding Success Criterion 2.1.2W3C Web Accessibility Initiative (WAI)
  2. [2] Web Content Accessibility Guidelines (WCAG) 2.2W3C (World Wide Web Consortium)
  3. [3] Understanding Success Criterion 2.4.7W3C Web Accessibility Initiative (WAI)

Powiązane błędy

  • NiezbędneZawsze aktywne

    Umożliwiają zalogowanie się, utrzymanie sesji, bezpieczną zmianę hasła i zapamiętanie tego wyboru. Bez nich serwis nie działa poprawnie, dlatego nie wymagają zgody i nie można ich wyłączyć w serwisie. Można je usunąć w ustawieniach przeglądarki.

Pełny wykaz stosowanych mechanizmów, ich czas działania i dostawców znajdziesz w Polityce cookies.