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.