Standardowe elementy HTML, takie jak <button> i <input>, mają wbudowane ułatwienia dostępu za pomocą klawiatury i należy ich używać, gdy tylko jest to możliwe. Jeśli jednak musisz utworzyć niestandardowe elementy interaktywne, możesz uzyskać oczekiwane zachowanie użytkownika, dodając element tabindex.
Dodaj element tabindex tylko do interaktywnych treści. Nawet jeśli treść jest ważna, na przykład najważniejszy obraz, użytkownicy czytników ekranu mogą ją zrozumieć bez dodatkowego wyróżnienia.
Co to jest tabindex?
Jeśli musisz zmienić domyślną kolejność kart dostarczanych przez elementy wbudowane, możesz użyć atrybutu HTML tabindex, by bezpośrednio ustawić pozycję karty danego elementu.
tabindex można zastosować do dowolnego elementu, ale powinna być stosowana tylko do elementów interaktywnych i przyjmuje zakres wartości całkowitych. Za pomocą tabindex możesz określić wyraźną kolejność elementów strony, które można zaznaczyć, wstawić w kolejności kart element, którego nie można zaznaczyć, i usunąć elementy z tej kolejności. Na przykład:
tabindex="0": wstawia element w naturalnej kolejności tabulacji. Aby zaznaczyć element, naciśnij Tab. Można go zaznaczyć, wywołując jego metodę focus().
tabindex="-1": usuwa element z naturalnej kolejności kart, ale nadal można go zaznaczyć, wywołując jego metodę focus()
tabindex="5": każdy element tabindex większy niż 0 przenosi element na początek zwykłej kolejności tabulacji. Jeśli istnieje wiele elementów, których indeks tabulacji jest większy niż 0, kolejność kart zaczyna się od najniższej wartości większej niż 0 i przesuwa się w górę. Używanie indeksu tabindex większego niż 0 jest uznawane za antywzorce.
Sprawdź, czy elementy sterujące są dostępne przy użyciu klawiatury
Takie narzędzia jak Lighthouse świetnie wykrywają niektóre problemy z ułatwieniami dostępu, ale niektóre testy nadal muszą być wykonywane ręcznie przez człowieka.
Aby poruszać się po witrynie, naciśnij klawisz Tab. Czy masz dostęp do wszystkich
interaktywnych elementów sterujących na stronie? Jeśli nie, być może trzeba będzie użyć polecenia tabindex, aby poprawić ostrość tych ustawień.
Zarządzanie zaznaczeniem na poziomie strony
Czasami tabindex pomaga zadbać o wygodę użytkowników. Stanie się tak na przykład w sytuacji, gdy tworzysz rozbudowaną pojedynczą stronę z różnymi sekcjami treści, która podczas wczytywania strony jest ukryta w różnych punktach. Może to oznaczać, że linki nawigacyjne zmieniają widoczną treść bez odświeżania strony.
W tym przypadku wskaż wybrany obszar treści, nadaj mu wartość tabindex o wartości -1 oraz wywołaj jego metodę focus. Dzięki temu treści nie będą wyświetlać się
w naturalnej kolejności elementów tabulacji. Ta technika, zwana zarządzaniem skupieniem, pozwala synchronizować postrzegany przez użytkownika kontekst z treściami wizualnymi w witrynie.
Zarządzanie fokusem w komponentach
W niektórych przypadkach trzeba też kontrolować zaznaczenie na poziomie kontrolnym, np. w przypadku elementów niestandardowych.
Ustalenie, jakie zachowania klawiatury należy wdrożyć, może być trudne. Przewodnik po metodach tworzenia aplikacji z dostępem do Rich Internetu (ARIA) zawiera listę typów komponentów i obsługiwanych przez nie działań klawiatury.
Wstaw element w kolejności kart
Wstaw element w naturalnej kolejności tabulacji za pomocą właściwości 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ą właściwości 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 aktywować, wywołując jego metodę focus().
Zastosowanie tabindex="-1" do elementu nie ma wpływu na jego elementy podrzędne. Jeśli wyświetlają się w kolejności na kartach naturalnie lub z powodu wartości tabindex, pozostaną w kolejności kart.
Aby usunąć element i wszystkie jego elementy podrzędne z kolejności kart, rozważ użycie kodu polyfill inert WICG.
Polyfill emuluje działanie proponowanego atrybutu inert, co uniemożliwia technologii wspomagających osoby z niepełnosprawnością wybieranie i odczytywanie elementów.
Unikaj: tabindex > 0
Każda wartość tabindex większa niż 0 przeskakuje element na początek kolejności naturalnej karty. Jeśli w przypadku wielu elementów z wartością tabindex większą niż 0 kolejność kart zaczyna się od najmniejszej wartości większej od 0 i stopniowo przesuwa się w górę.
Użycie wartości tabindex większej niż 0 jest uznawane za antywzorce, ponieważ czytniki ekranu poruszają się po stronie w kolejności DOM, a nie w kolejności kart. Jeśli chcesz, aby element pojawiał się wcześniej w kolejności kart, przenieś go na wcześniejsze miejsce w DOM.
Narzędzie Lighthouse pozwala rozpoznawać elementy, których wartość to tabindex > 0. Uruchom audyt ułatwień dostępu (Lighthouse > Opcje > Ułatwienia dostępu) i poszukaj wyników kontroli „Żaden element nie ma wartości [tabindex] większej niż 0”.
Użyj opcji „przemieszczanie się przez tabindex”
Jeśli tworzysz złożony komponent, być może trzeba będzie dodać obsługę klawiatury poza jego obszarem. Jeśli to możliwe, używaj wbudowanego elementu select. Można go zaznaczyć i umożliwić korzystanie z klawiszy strzałek w celu wyświetlenia dodatkowych opcji, które można wybrać.
Aby zaimplementować podobne funkcje w swoich komponentach, możesz użyć metody znanej jako „przenośna tabindex”. Działa ona przez ustawienie tabindex na -1 dla wszystkich elementów podrzędnych z wyjątkiem obecnie aktywnej. Następnie komponent używa detektora zdarzeń klawiatury, aby określić, który klawisz został naciśnięty przez użytkownika.
W takim przypadku komponent ustawia wartość tabindex wcześniej wybranego elementu podrzędnego na -1, ustawia wartość tabindex elementu podrzędnego, który ma być skupiony, na 0 i wywołuje w tym przypadku 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>
Przepisy dostępu z klawiatury
Jeśli nie masz pewności, do jakiego poziomu obsługi klawiatury mogą być potrzebne komponenty niestandardowe, zapoznaj się z artykułem ARIA Authoring Applications 1.1 (Praktyka tworzenia ARIA 1.1). W tym przewodniku znajdziesz typowe wzorce interfejsu użytkownika oraz klucze, które powinny obsługiwać Twoje komponenty.