2.1.1 Klawiatura

/ Jak strony go nie spełniają

• Element div albo span ma obsługę kliknięcia, ale nie ma tabindex ani roli, więc klawisz Tab go pomija.
• Menu rozwijane otwiera się tylko po najechaniu myszą i nie da się go otworzyć z klawiatury.
• Własna lista wyboru, kalendarz albo suwak reaguje na klikanie i przeciąganie, ale ignoruje klawisze strzałek.
• Link zapisano jako element a bez atrybutu href i podpięto w skrypcie, co wyrzuca go z kolejności tabulacji.
• Przycisk zamykania okna dialogowego to ikona w elemencie div, więc osoba korzystająca z klawiatury otworzy okno, ale go nie zamknie.

/ Jak sprawdzić samodzielnie

1. Odłóż mysz, kliknij w pasek adresu i naciskaj Tab. Porównaj kolejne zatrzymania z kontrolkami, które widzisz, i sprawdź, czy każda z nich dostaje fokus.
2. Uruchom każdą kontrolkę, do której dojdziesz: Enter na linkach, Enter i spacja na przyciskach, spacja na polach wyboru, strzałki w grupach przycisków radiowych, listach, kartach i menu.
3. Otwórz z klawiatury każde menu, akordeon, okno dialogowe i kalendarz, skorzystaj z niego, a potem zamknij klawiszem Escape albo przyciskiem zamykania.
4. Poszukaj elementów, które reagują tylko na najechanie, przeciąganie albo dwuklik, i sprawdź, czy do tego samego efektu prowadzi droga z klawiatury.
5. Uruchom darmowe narzędzie, na przykład Accessibility Insights for Web, którego widok Tab stops rysuje drogę fokusu, i porównaj tę drogę ze stroną.

/ Jak to naprawić

• Użyj natywnego elementu: button do akcji, a z atrybutem href do nawigacji, input, select i textarea do danych. Przyjmują fokus i reagują na klawiaturę bez dodatkowego kodu.
• Gdy własnego elementu nie da się uniknąć, dodaj tabindex="0", odpowiednią rolę i obsługę keydown dla klawiszy Enter i spacji obok obsługi kliknięcia.
• W widżetach złożonych, takich jak listy kart i menu, zostaw jeden element z tabindex="0", pozostałym daj tabindex="-1" i przenoś fokus między nimi strzałkami.
• Każdej interakcji opartej na najechaniu lub przeciąganiu daj drugą drogę: przycisk otwierający menu, przyciski w górę i w dół do zmiany kolejności listy, pole tekstowe obok suwaka.

/ Co sprawdza nasz skaner

Na wyrenderowanej stronie działają trzy testy. keyboard-unreachable zgłasza widoczny element, który ma rolę interaktywną albo atrybut onclick, a klawisz Tab do niego nie dochodzi. tabs-no-roving-focus i menu-no-roving-focus zgłaszają listy kart i menu, w których liczba zatrzymań tabulatora jest inna niż dokładnie jedno. Obsługi kliknięcia podpiętej w skrypcie test nie widzi i żaden z nich nie naciska klawiszy, by potwierdzić, że kontrolka działa.