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ć, gdy tylko jest to możliwe. Jeśli jednak chcesz utworzyć niestandardowe elementy interaktywne, możesz określić oczekiwane zachowanie użytkownika, dodając tabindex.

Obsługa przeglądarek

• 1
• 12
• 1.5
• 3.1

Źródło

Wskazówka: więcej informacji o fokusie klawiatury znajdziesz w szkoleniu z dostępności.

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 konieczności dodawania punktu skupienia.

Uwaga: w miarę możliwości używaj wbudowanego elementu HTML zamiast tworzyć własną wersję niestandardową. Na przykład <button> obsługuje już pełną klawiaturę. Dzięki temu nie musisz zarządzać tabindex ani dodawać semantyki za pomocą ARIA.

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.

Wskazówka: informacje o automatycznym i ręcznym testowaniu ułatwień dostępu znajdziesz w artykule „Ułatwienia dostępu – informacje dla twórców”.

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.

Ostrzeżenie: jeśli nie widzisz wskaźnika fokusu, może to oznaczać, że jest on ukryty przez plik CSS. Sprawdź :focus { outline: none; }. Wskazówki, jak to zrobić, znajdziesz w naszym przewodniku dotyczącym stylowania punktu skupienia.

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ą treść bez odświeżania strony.

W tym przypadku zidentyfikuj wybrany obszar treści i przypisz mu tabindex -1, a następnie wywołaj 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 spójność postrzeganego kontekstu użytkownika z elementami wizualnymi witryny.

Zarządzanie punktem skupienia 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.

Wstawianie elementu do 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 ustawić jako aktywny, 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 z powodu wartości tabindex, pozostaną w kolejności elementów. Aby usunąć element i wszystkie jego elementy podrzędne z kolejności kart, użyj polyfilla inertWICG. Rozszerzenie emuluje działanie proponowanego atrybutu inert, który uniemożliwia wybranie lub odczytanie elementów przez technologie wspomagające.

Uwaga: funkcja inert jest eksperymentalna i nie we wszystkich przypadkach może działać zgodnie z oczekiwaniami. Dokładnie przetestuj je przed użyciem w wersji produkcyjnej.

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 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. 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 „Roaming tabindex”.

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ć, a za pomocą klawiszy strzałek wyświetlić dodatkowe opcje.

Aby zaimplementować podobne funkcje we własnych komponentach, możesz użyć techniki zwanej „przemieszczającą się wartością tabindex”. Przemieszczająca się wartość tabindex działa poprzez ustawienie wartości tabindex na -1 dla wszystkich elementów podrzędnych z wyjątkiem aktywnego w danym momencie. 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>

Uwaga: atrybuty role="" umożliwiają zmianę semantyki elementu, aby był on prawidłowo odczytywany przez czytnik ekranu. Więcej informacji na ten temat znajdziesz w naszym przewodniku po podstawach czytników ekranu.

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 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.