2.1.2 Brak pułapki na klawiaturę

Krótko

Jeśli użytkownik może wejść klawiaturą do komponentu, musi też móc z niego wyjść klawiaturą.

Problem w praktyce

Użytkownik przechodzi klawiaturą do modala, menu, odtwarzacza, mapy albo widgetu. Fokus zostaje w środku i nie da się wrócić do reszty strony. Użytkownik jest uwięziony.

To kryterium nie mówi ogólnie o tym, czy funkcja działa z klawiatury. Skupia się na sytuacji, w której da się wejść do komponentu, ale nie da się go opuścić bez myszy.

Kogo to dotyczy

• Osób korzystających z klawiatury.
• Osób niewidomych.
• Osób z niepełnosprawnościami ruchowymi.
• Osób korzystających z przełączników.
• Osób słabowidzących korzystających z powiększenia.

Dobry przykład

• Modal można zamknąć Escape.
• Z menu można wyjść Tab, Shift+Tab albo Escape.
• Widget mapy ma instrukcję, jak go opuścić.
• Po zamknięciu modala fokus wraca w logiczne miejsce.
• Komponent nie przejmuje klawiatury bez możliwości wyjścia.

Zły przykład

• Fokus krąży w karuzeli i nie da się przejść dalej.
• Mapa przechwytuje klawisze i nie pozwala opuścić obszaru.
• Modal nie zamyka się z klawiatury.
• Menu rozwijane zatrzymuje Tab.
• Iframe albo widget blokuje dalszą nawigację.

Przykłady kodu

document.addEventListener("keydown", function (event) {
  if (event.key === "Escape") {
    closeDialog();
  }
});

const trigger = document.querySelector("#open-dialog");

function closeDialog() {
  dialog.close();
  trigger.focus();
}

document.addEventListener("keydown", function (event) {
  if (event.key === "Tab") {
    event.preventDefault();
  }
});

Przykład graficzny

To jest statyczny schemat edukacyjny. Pokazuje różnicę między pułapką fokusu a komponentem, z którego można przewidywalnie wyjść klawiaturą. Nie jest działającym modalem.

Jak sprawdzić

1. Odłóż mysz.
2. Wejdź klawiaturą do każdego komponentu.
3. Sprawdź, czy możesz go opuścić Tab, Shift+Tab albo Escape.
4. Sprawdź modale, mapy, odtwarzacze, menu, widgety, iframe i karuzele.
5. Sprawdź, czy po zamknięciu fokus wraca logicznie.
6. Nie oceniaj wyłącznie automatem. To kryterium wymaga testu manualnego.

Co sprawdzi automat, a czego nie

Automat może wykryć

• Część elementów interaktywnych bez poprawnej struktury.
• Niektóre problemy z ukrytym albo nieaktywnym fokusem.
• Część błędów w modalach i niestandardowych widgetach.

Automat nie oceni pewnie

• Czy użytkownik faktycznie może wyjść z komponentu w pełnym przepływie.
• Czy instrukcja wyjścia jest zrozumiała.
• Czy fokus wraca w logiczne miejsce po zamknięciu.

Typowe błędy

• Modal bez obsługi Escape.
• Mapa albo iframe przechwytujące klawiaturę.
• Karuzela, z której nie da się przejść dalej Tabem.
• Menu, które zatrzymuje fokus po otwarciu.
• Brak powrotu fokusu po zamknięciu komponentu.

Powiązane kryteria

• 2.1.1 Klawiatura
• 2.4.3 Kolejność fokusu
• 2.4.7 Widoczny fokus
• 2.4.11 Fokus niezakryty minimum
• 4.1.2 Nazwa, rola, wartość

Źródła

• WCAG 2.2: 2.1.2 No Keyboard Trap (otwiera się w nowym oknie)
• Understanding WCAG 2.1.2 (otwiera się w nowym oknie)
• How to Meet WCAG 2.1.2 (otwiera się w nowym oknie)