2.1.2 Bez pułapki na klawiaturę

Jeśli fokus z klawiatury może wejść do jakiejś części strony, musi też dać się z niej wyprowadzić klawiaturą, a gdy wymaga to nietypowego klawisza, strona musi powiedzieć, jakiego.

/ Czego wymaga

Pułapka na klawiaturę to miejsce, w którym Tab, Shift+Tab i strzałki przestają działać: fokus wchodzi do osadzonego odtwarzacza, edytora, mapy albo źle zbudowanego widżetu i nie może z niego wyjść. Dla osoby, która korzysta tylko z klawiatury albo z przełącznika lub czytnika ekranu wysyłającego polecenia klawiaturowe, reszta strony znika, a często jedynym wyjściem jest zamknięcie karty. Dlatego WCAG zalicza to kryterium do czterech, które obejmują całą treść strony, także części, na których nie opiera się spełnienie innych kryteriów.

Zasada brzmi: jeśli fokus da się wprowadzić do komponentu z klawiatury, da się go też z niego wyprowadzić samą klawiaturą. Gdy wyjście wymaga czegoś więcej niż strzałek lub klawisza Tab bez modyfikatorów albo innej standardowej metody wyjścia, użytkownik musi zostać poinformowany, jak to zrobić. WCAG nie definiuje standardowych metod wyjścia, bo zależą od sprzętu, przeglądarki i systemu, ale W3C wskazuje Escape jako typową metodę na fizycznej klawiaturze. Utrzymywanie fokusu w otwartym oknie modalnym nie jest pułapką, o ile użytkownik wie, jak z niego wyjść. Edytor tekstu, który używa klawisza Tab do wcięć, spełnia kryterium, jeśli mówi, którym klawiszem wyprowadzić z niego fokus.

/ Jak strony go nie spełniają

Osadzony odtwarzacz wideo, mapa albo gra we wtyczce lub w ramce iframe przejmuje fokus i obsługuje każdy klawisz sama, bez klawisza, który oddaje fokus stronie.
Okno modalne przenosi fokus w kółko między swoimi przyciskami, ignoruje Escape, a jedynym wyjściem jest ikona zamykania, która nie przyjmuje fokusu.
Skrypt zatrzymujący fokus działa dalej po zamknięciu okna dialogowego, więc Tab ciągle wraca do elementu, którego już nie widać.
Edytor tekstu albo pole kodu przejmuje Tab do wcięć i nie podaje żadnej instrukcji, jak wyprowadzić z niego fokus.
Własny kalendarz po otwarciu przenosi fokus do swojej siatki i przy każdym keydown ściąga go z powrotem, więc ani Tab, ani Escape nie pozwala wyjść.

/ Jak sprawdzić samodzielnie

Zacznij od paska adresu i przejdź klawiszem Tab przez wszystkie kontrolki strony, łącznie z osadzonymi odtwarzaczami, mapami, edytorami i widżetami, aż fokus wróci do przeglądarki.
Przy każdym komponencie sprawdź, czy Tab przechodzi dalej, a Shift+Tab cofa. Jeśli fokus stoi w miejscu po kilku naciśnięciach, spróbuj strzałek i klawisza Escape.
Otwórz z klawiatury każde okno dialogowe, menu i okienko, wyjdź z niego klawiszem Escape albo przyciskiem zamykania i sprawdź, czy fokus może potem iść dalej przez resztę strony.
Tam, gdzie komponent wymaga innego klawisza do wyjścia, sprawdź, czy strona o tym mówi, w widocznym tekście przed komponentem albo w instrukcji pokazywanej, gdy dostaje fokus.
Gdy fokusu nie widać, śledź go wyrażeniem na żywo (Live expression) w konsoli narzędzi deweloperskich Chrome ustawionym na document.activeElement.

/ Jak to naprawić

Po zamknięciu okna dialogowego usuń obsługę zatrzymującą fokus i przenieś fokus z powrotem na kontrolkę, która je otworzyła.
Zamykaj okna modalne klawiszem Escape przez obsługę keydown, a kontrolkę zamykania zrób elementem button. Natywny element dialog otwarty przez showModal() domyślnie zamyka się klawiszem Escape.
W edytorze, który przejmuje Tab, zapewnij opisany klawisz wyprowadzający z niego fokus i pokazuj tę instrukcję, gdy edytor dostaje fokus.
Nie wywołuj preventDefault() na zdarzeniach keydown klawisza Tab, chyba że komponent sam przenosi fokus i pozwala mu wyjść na obu końcach.
Odtwarzacze i widżety firm trzecich testuj na miejscu przed wdrożeniem i wymień te, które zatrzymują fokus. Pułapka w osadzonej treści narusza kryterium na stronie, która tę treść zawiera.

/ Co sprawdza nasz skaner

Skan witryny nie naciska klawiszy, więc nie udowodni pułapki. Robią to dwa testy w rozszerzeniu przeglądarki OAKMONT Inspector, na żądanie i prawdziwymi zdarzeniami klawiszy wysyłanymi przez debuger Chrome. focus-trap naciska Tab do 60 razy i zgłasza element, na którym fokus zostaje przez trzy naciśnięcia z rzędu. escape-does-not-close otwiera klawiszem Enter do sześciu kontrolek z aria-expanded lub aria-haspopup, naciska Escape i zgłasza to, co zostało otwarte. Pętla przez kilka elementów i Shift+Tab nie są sprawdzane, a widżet ignorujący Escape jest pułapką tylko wtedy, gdy żaden inny klawisz z niego nie wyprowadza.

/ Kto je łamie, według naszych pomiarów

Cotygodniowy indeks nie ma danych dla tego kryterium, bo żaden test uruchamiany przez skan witryny go nie sprawdza. Ocenia je człowiek i do tego służy audyt ręczny.

Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.

/ Pytania o to kryterium

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

Nie. W3C stwierdza, że ograniczenie fokusu do otwartego okna modalnego nie narusza 2.1.2, o ile użytkownik wie, jak z niego wyjść. Typowe wyjścia to Escape oraz przycisk Anuluj albo Zamknij. Okno narusza kryterium, gdy żadne z nich nie działa z klawiatury.

Co liczy się jako standardowa metoda wyjścia?

WCAG jej nie definiuje, bo zależy od sprzętu, przeglądarki i systemu operacyjnego użytkownika. Klawisz Tab i strzałki bez modyfikatorów liczą się zawsze, a W3C wskazuje Escape jako typową standardową metodę na fizycznej klawiaturze. Każdy inny klawisz albo kombinacja jest dopuszczalna tylko wtedy, gdy użytkownik dostanie o niej informację.

Czy 2.1.2 dotyczy treści firm trzecich, na przykład osadzonych odtwarzaczy?

Tak. To jedno z czterech kryteriów, które obejmują całą treść strony, razem z 1.4.2, 2.2.2 i 2.3.1, bo ich naruszenie blokuje korzystanie z całej strony. Pułapka w osadzonym odtwarzaczu albo widżecie czatu narusza kryterium na stronie, która je zawiera, bez względu na to, kto napisał kod.

Zmierz własną stronę Wszystkie zmierzone bariery