Sterowanie zaznaczeniem za pomocą indeksu tabulacji

Rob Dodson

Alexandra Klepper

Standardowe elementy HTML, takie jak <button> czy <input>, mają wbudowaną dostępność za pomocą klawiatury i powinny być używane w miarę możliwości. Jeśli jednak chcesz utworzyć niestandardowe elementy interaktywne, możesz dodać tabindex, aby uzyskać oczekiwane zachowanie użytkownika.

Dodawaj symbol tabindex tylko do treści interaktywnych. Nawet jeśli treść jest ważna, np. kluczowy obraz, użytkownicy czytników ekranu mogą ją zrozumieć bez dodawania fokusu.

Co to jest tabindex?

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

tabindex można zastosować do dowolnego elementu, ale powinno się go używać tylko w przypadku elementów interaktywnych. Przyjmuje on zakres wartości całkowitych. Za pomocą atrybutu tabindex możesz określić kolejność elementów strony, na których można ustawić fokus, wstawić do kolejności tabulacji element, na którym w inny sposób nie można ustawić fokusu, oraz usunąć elementy z kolejności tabulacji. Na przykład:

tabindex="0": wstawia element w naturalnej kolejności tabulacji. Element można zaznaczyć, naciskając Tab, lub wywołując jego metodę focus().

tabindex="-1": usuwa element z naturalnej kolejności tabulacji, ale element nadal może być aktywny po wywołaniu jego metody focus().

tabindex="5": Każda wartość atrybutu tabindex większa niż 0 przenosi element na początek naturalnej kolejności tabulacji. Jeśli istnieje wiele elementów z atrybutem tabindex o wartości większej niż 0, kolejność tabulacji zaczyna się od najmniejszej wartości większej od zera i wzrasta. Użycie wartości tabindex większej niż 0 jest uważane za nieprawidłowe.

Sprawdzanie, czy elementy sterujące są dostępne za pomocą klawiatury

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

Spróbuj nacisnąć klawisz Tab, aby poruszać się po witrynie. Czy możesz dotrzeć do wszystkich interaktywnych elementów sterujących na stronie? Jeśli nie, możesz użyć tabindex , aby poprawić możliwość zaznaczania tych elementów.

Zarządzanie fokusem na poziomie strony

Czasami tabindex pomaga zapewnić użytkownikom spójne wrażenia. Na przykład jeśli tworzysz rozbudowaną stronę z różnymi sekcjami treści, z których część jest ukryta w różnych momentach wczytywania strony. Może to oznaczać, że linki nawigacyjne zmieniają widoczną treść bez odświeżania strony.

W tym przypadku określ wybrany obszar treści i nadaj mu tabindex-1, a następnie wywołaj jego metodę focus. Dzięki temu treść nie będzie wyświetlana w naturalnej kolejności tabulacji. Ta technika, zwana zarządzaniem zaznaczeniem, zapewnia synchronizację kontekstu postrzeganego przez użytkownika z treścią wizualną witryny.

Zarządzanie fokusem w komponentach

W niektórych przypadkach musisz też zarządzać fokusem na poziomie kontrolki, np. w przypadku elementów niestandardowych.

Określenie, które zachowania klawiatury należy wdrożyć, może być trudne. W przewodniku Accessible Rich Internet Applications (ARIA) Authoring Practices znajdziesz listę typów komponentów i rodzajów obsługiwanych przez nie działań klawiatury.

Wstawianie elementu do kolejności tabulacji

Wstaw element do naturalnej kolejności tabulacji za pomocą 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 metodę focus() elementu.

Usuwanie elementu z kolejności tabulacji

Usuń element, klikając 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 tabulacji, ale nadal będzie można go zaznaczyć, wywołując jego metodę focus().

Zastosowanie atrybutu tabindex="-1" do elementu nie ma wpływu na jego elementy podrzędne. Jeśli są one w kolejności tabulacji naturalnie lub z powodu wartości tabindex, pozostaną w tej kolejności. Aby usunąć element i wszystkie jego elementy podrzędne z kolejności tabulacji, możesz użyć polyfillu WICGinert. Polyfill emuluje działanie proponowanego atrybutu inert, który uniemożliwia wybieranie elementów lub odczytywanie ich przez technologie wspomagające.

Unikaj tabindex > 0

Każda wartość atrybutu tabindex większa od 0 powoduje przesunięcie elementu na początek naturalnej kolejności tabulacji. Jeśli jest wiele elementów z atrybutem tabindex o wartości większej niż 0, kolejność tabulacji zaczyna się od najmniejszej wartości większej od zera i rośnie.

Używanie wartości tabindex większej niż 0 jest uważane za antywzorzec, ponieważ czytniki ekranu poruszają się po stronie w kolejności DOM, a nie w kolejności tabulacji. Jeśli chcesz, aby element pojawiał się wcześniej w kolejności tabulacji, przenieś go na wcześniejsze miejsce w DOM.

Za pomocą Lighthouse możesz identyfikować elementy o wartości tabindex > 0. Uruchom audyt dostępności (Lighthouse > Opcje > Dostępność) i sprawdź wyniki audytu „Żaden element nie ma wartości atrybutu [tabindex] większej niż 0”.

Użyj „roamingowego tabindex”

Jeśli tworzysz złożony komponent, może być konieczne dodanie dodatkowej obsługi klawiatury poza fokusem. Jeśli to możliwe, używaj wbudowanego elementu select. Można ją zaznaczyć i za pomocą klawiszy strzałek wyświetlić dodatkowe opcje do wyboru.

Aby zaimplementować podobne funkcje w swoich komponentach, możesz użyć techniki znanej jako „wędrujący tabindex”. Wędrujący indeks tabulacji działa poprzez ustawienie wartości tabindex na -1 dla wszystkich elementów podrzędnych z wyjątkiem aktualnie aktywnego. Komponent używa następnie odbiornika zdarzeń klawiatury, aby określić, który klawisz został naciśnięty przez użytkownika.

W takim przypadku komponent ustawia wartość tabindex poprzednio wybranego elementu podrzędnego na -1, ustawia wartość tabindex elementu podrzędnego, który ma zostać wybrany, na 0 i wywołuje na 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>

Przepisy dotyczące dostępu z klawiatury

Jeśli nie masz pewności, jaki poziom obsługi klawiatury jest potrzebny w przypadku Twoich komponentów niestandardowych, zapoznaj się z dokumentem ARIA Authoring Practices 1.1. W tym przewodniku znajdziesz listę typowych wzorców interfejsu i informacje o tym, które klucze powinny obsługiwać Twoje komponenty.