Sterowanie zaznaczeniem za pomocą indeksu tabulacji

Rob Dodson

Alexandra Klepper

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

Dodawaj tabindex tylko do treści, które są interaktywne. Nawet jeśli treści są ważne, np. kluczowy obraz, użytkownicy czytników ekranu mogą je zrozumieć bez 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() tego elementu.

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 większym niż 0, kolejność kart zaczyna się od wartości najmniejszej, która jest większa 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 punktem skupienia 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. Oznacza to, że linki nawigacyjne zmieniają widoczną treść 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 postrzegany kontekst użytkownika jest zsynchronizowany z wizualnymi elementami 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ć. W przewodniku Praktyki dotyczące tworzenia aplikacji internetowych z uwzględnieniem dostępności (ARIA) znajdziesz listę typów komponentów i działania klawiatury, które obsługują.

Wstawianie elementu do kolejności kart

Wstawianie elementu w naturalnej kolejności 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 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 ustawić na pierwszym planie, wywołując 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 ze względu na wartość tabindex, pozostaną w tej kolejności. Aby usunąć element i wszystkie jego elementy podrzędne z kolejności kart, możesz użyć polyfilla inertWICG. Rozszerzenie emuluje działanie proponowanego atrybutu inert, który uniemożliwia wybór elementów lub ich odczyt przez technologie wspomagające.

Unikaj tabindex > 0

Wartość tabindex większa od 0 powoduje przesunięcie elementu na początek naturalnego porządku kart. Jeśli jest kilka elementów 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 według kolejności ich wyświetlania. Jeśli chcesz, aby element pojawił się wcześniej w kolejności kart, przełóż go na wcześniejsze miejsce w DOM.

Dzięki Lighthouse możesz zidentyfikować elementy z wartością tabindex > 0. Przeprowadź kontrolę dostępności (Lighthouse > Opcje > Dostępność) i sprawdź wyniki kontroli „Żaden element nie ma wartości atrybutu [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 ustawić w centrum ekranu, a za pomocą klawiszy strzałek można wyświetlić dodatkowe opcje.

Aby zaimplementować podobne funkcje we własnych komponentach, możesz użyć techniki znanej jako „przemieszczający się tabindex”. Tabindex przemieszczający się działa poprzez ustawienie wartości tabindex na -1 dla wszystkich elementów podrzędnych z wyjątkiem aktywnego. Następnie komponent używa odbiornika zdarzeń klawiatury, aby określić, który klawisz nacisnął użytkownik.

W takim przypadku komponent ustawia wartość właściwości tabindex poprzednio skupionego elementu podrzędnego na -1, a wartość właściwości tabindex elementu, który ma być teraz skupiony, na 0. 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>

Dostęp do przepisów z klawiatury

Jeśli nie masz pewności, jakiego poziomu obsługi klawiatury mogą wymagać Twoje komponenty niestandardowe, zapoznaj się z dokumentem ARIA Authoring Practices 1.1. W tym przewodniku znajdziesz listę typowych wzorów interfejsu użytkownika oraz informacje o tym, które klucze powinny obsługiwać komponenty.