Sterowanie zaznaczeniem za pomocą indeksu tabulacji

Rob Dodson

Alexandra Klepper

Standardowe elementy HTML, takie jak <button> lub <input>, mają wbudowane ułatwienia dostępności dla osób z zaburzeniami wzroku i należy ich używać zawsze, gdy to możliwe. Jeśli jednak chcesz utworzyć niestandardowe elementy interaktywne, możesz określić oczekiwane zachowanie użytkownika, dodając tabindex.

Dodaj element tabindex tylko do interaktywnych treści. Nawet jeśli treści są ważne, np. kluczowy obraz, użytkownicy czytników ekranu mogą je zrozumieć bez konieczności dodawania punktu skupienia.

Co to jest tabindex?

Jeśli chcesz zmienić domyślną kolejność kart zapewnianą przez wbudowane elementy, możesz użyć atrybutu HTML tabindex, aby jawnie ustawić pozycję karty elementu.

tabindex można zastosować do dowolnego elementu, ale należy go stosować tylko do elementów interaktywnych. Przyjmuje on zakres wartości całkowitych. Za pomocą atrybutu tabindex możesz określić dokładną kolejność elementów strony, które można zaznaczyć, wstawić element, który normalnie nie może być zaznaczony, do kolejności kart i usunąć elementy z kolejności kart. Na przykład:

tabindex="0": wstawia element w naturalnej kolejności kart. Zaznaczenie elementu można wywołać, naciskając klawisz Tab, a także wywołując metodę focus().

tabindex="-1": usuwa element z naturalnej kolejności kart, ale można go nadal aktywować, wywołując metodę focus().

tabindex="5": dowolna wartość tabindex większa niż 0 powoduje przesunięcie elementu na początek naturalnej kolejności kart. Jeśli jest kilka elementów z atrybutem tabindex o większej wartości niż 0, kolejność elementów na karcie zaczyna się od najmniejszej wartości większej od 0 i idzie w górę. Użycie tabindex większego niż 0 jest uważane za wzór antypaterny.

Upewnij się, że elementy sterujące są dostępne z klawiatury.

Narzędzie takie jak Lighthouse świetnie radzi sobie z automatycznym wykrywaniem niektórych problemów z ułatwieniami dostępu, ale niektóre testy muszą być przeprowadzane ręcznie przez człowieka.

Aby poruszać się po witrynie, użyj klawisza Tab. Czy możesz dosięgnąć wszystkich interaktywnych elementów sterujących na stronie? Jeśli nie, może być konieczne użycie tabindex, aby ułatwić skupienie się na tych elementach sterujących.

Zarządzanie fokusem na poziomie strony

Czasami tabindex pomaga zapewnić użytkownikom płynne wrażenia. Może się tak zdarzyć, jeśli utworzysz solidną stronę z różnymi sekcjami treści, w których niektóre treści są ukryte w różnych momentach wczytywania strony. Może to oznaczać, że linki nawigacyjne zmieniają widoczną zawartość bez odświeżania strony.

W tym przypadku należy zidentyfikować wybrany obszar treści i przypisać mu tabindex o wartości -1 oraz wywołać metodę focus. Dzięki temu treści nie będą wyświetlane w naturalnej kolejności kart. Ta technika, zwana zarządzaniem punktem ciężkości, zapewnia, że kontekst postrzegany przez użytkownika jest zsynchronizowany z elementami wizualnymi witryny.

Zarządzanie fokusem w komponentach

W niektórych przypadkach musisz też zarządzać punktem skupienia na poziomie elementu sterującego, np. w przypadku elementów niestandardowych.

Trudno jest określić, które zachowania klawiatury należy zaimplementować. Przewodnik Praktyki dotyczące tworzenia aplikacji internetowych z dostępnością (ARIA) zawiera listę typów komponentów i ich obsługiwanych działań klawiatury.

Wstaw element w kolejności kart

Wstaw element do naturalnego porządku kart za pomocą tabindex="0". Na przykład:

<div tabindex="0">Focus me with the TAB key</div>

Aby ustawić element w centrum uwagi, naciśnij klawisz Tab lub wywołaj metodę focus() elementu.

Usuwanie elementu z kolejności kart

Usuń element, używając opcji 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 wartości tabindex="-1" do elementu nie ma wpływu na jego elementy podrzędne. Jeśli znajdują się one w kolejności elementów domyślnie lub z powodu wartości tabindex, pozostaną w kolejności elementów. 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 tabulacji. Jeśli jest więcej niż 1 element z wartością tabindex większą niż 0, kolejność kart zaczyna się od wartości najniższej większej niż 0 i idzie w górę.

Użycie wartości tabindex większej niż 0 jest uważane za nieprawidłowy wzór, ponieważ czytniki ekranu poruszają się po stronie zgodnie z kolejnością elementów w DOM, a nie zgodnie z kolejnością kart. Jeśli chcesz, aby element pojawił się wcześniej w kolejności kart, przełóż go do wcześniejszego miejsca w DOM.

Dzięki Lighthouse możesz zidentyfikować elementy z wartością 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 „tabindex ruchome”.

Jeśli tworzysz złożony komponent, może być konieczne dodanie dodatkowego wsparcia klawiatury poza skupieniem. Jeśli to możliwe, używaj wbudowanego elementu select. Można go zaznaczyć i użyć klawiszy strzałek, aby odsłonić dodatkowe opcje do wyboru.

Aby wdrożyć podobne funkcje w swoich komponentach, możesz użyć metody znanej jako „przenośna tabindex”. Działa ona przez ustawienie parametru tabindex na -1 dla wszystkich elementów podrzędnych oprócz obecnie aktywnej. Następnie komponent używa odbiornika zdarzeń klawiatury, aby określić, który klawisz nacisnął użytkownik.

W takim przypadku komponent ustawia wartość atrybutu tabindex poprzednio skupionego elementu podrzędnego na -1, a atrybutu tabindex elementu, który ma być teraz skupiony, na 0, a następnie wywołuje 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 listę typowych wzorów interfejsu użytkownika oraz informacje o tym, które klucze powinny obsługiwać komponenty.