Standardowe elementy HTML, takie jak <button> czy <input>, mają wbudowane ułatwienia dostępu z klawiatury. Jeśli jednak tworzysz niestandardowe komponenty interaktywne, użyj atrybutu tabindex, aby mieć pewność, że są dostępne przy użyciu klawiatury.
Sprawdź, czy elementy sterujące są dostępne przy użyciu klawiatury
Narzędzie takie jak Lighthouse doskonale sprawdza się przy wykrywaniu pewnych problemów z ułatwieniami dostępu, ale niektóre działania mogą sprawdzić tylko człowiek.
Spróbuj nacisnąć klawisz Tab, aby poruszać się po witrynie. Czy masz dostęp do wszystkich
interaktywnych elementów sterujących na stronie? Jeśli nie, konieczne może być użycie tabindex, aby zwiększyć precyzję tych ustawień.
Wstawianie elementu w kolejności kart
Wstaw element w naturalnej kolejności kart za pomocą funkcji tabindex="0". Na przykład:
<div tabindex="0">Focus me with the TAB key</div>
Aby zaznaczyć element, naciśnij klawisz Tab lub wywołaj jego metodę focus().
Usuwanie elementu z kolejności kart
Usuń element za pomocą funkcji tabindex="-1". Na przykład:
<button tabindex="-1">Can't reach me with the TAB key!</button>
Spowoduje to usunięcie elementu z naturalnej kolejności kart, ale nadal będzie można go skupić, wywołując jego metodę focus().
Pamiętaj, że zastosowanie tabindex="-1" do elementu nie ma wpływu na jego elementy podrzędne. Jeśli układa się w kolejności kart naturalnie lub z powodu wartości tabindex, pozostanie w kolejności kart.
Aby usunąć element i wszystkie jego elementy podrzędne z kolejności tabulatorów, rozważ użycie kodu polyfill inert platformy WICG.
Polyfill emuluje zachowanie proponowanego atrybutu inert, który uniemożliwia wybieranie i odczytywanie elementów przez technologie wspomagające.
Unikaj: tabindex > 0
Każda wartość tabindex większa niż 0 przeskakuje element na początek naturalnej kolejności kart. Jeśli jest wiele elementów z wartością tabindex większą niż 0, kolejność kart rozpoczyna się od najmniejszej wartości większej niż 0 i przesuwa się w górę.
Użycie wartości tabindex większej niż 0 jest uważane za antywzorowe, ponieważ czytniki ekranu poruszają się po stronie w kolejności DOM, a nie w kolejności kart. Jeśli chcesz, aby element pojawił się wcześniej w kolejności kart, musisz go przenieść na wcześniejsze miejsce w DOM.
Lighthouse ułatwia identyfikowanie elementów z wartością tabindex > 0. Uruchom kontrolę ułatwień dostępu (Lighthouse > Opcje > Ułatwienia dostępu) i poszukaj wyników kontroli „Żaden element nie ma wartości [indeks tabulacji] większej niż 0”.
Utwórz komponenty z ułatwieniami dostępu za pomocą funkcji „roving tabindex”
Jeśli tworzysz złożony komponent, konieczne może być dodanie do klawiatury dodatkowej obsługi elementów. Weź pod uwagę wbudowany element select. Można go zaznaczyć i za pomocą klawiszy strzałek możesz pokazać dodatkowe funkcje (opcje do wyboru).
Aby wdrożyć podobne funkcje w swoich komponentach, użyj metody znanej jako „wędrowanie tabindex”. Przenoszenie zawartości tabindexatora polega na ustawieniu tabindex na -1 w przypadku wszystkich dzieci z wyjątkiem aktualnie aktywnego. Następnie komponent określa, który klawisz naciśnięł użytkownik, używając detektora zdarzeń z klawiatury.
W takim przypadku komponent ustawia tabindex elementu podrzędnego, który wcześniej był aktywny, na -1, ustawia wartość tabindex elementu podrzędnego, na którym jest koncentracja, i wywołuje w nim metodę focus().
Przed
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="0">Redo</button>
<button tabindex="-1">Cut</button>
</div>
Po
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="-1">Redo</button>
<button tabindex="0">Cut</button>
</div>
DO ZROBIENIA: DevSite – ocena „Think and Check”
Przepisy z dostępem z klawiatury
Jeśli nie masz pewności, jaki poziom obsługi klawiatury mogą mieć Twoje komponenty niestandardowe, zapoznaj się z metodami tworzenia ARIA 1.1. W tym praktycznym przewodniku znajdziesz listę typowych wzorców interfejsu użytkownika oraz klucze obsługiwane przez poszczególne komponenty.