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 musisz utworzyć niestandardowych elementów interaktywnych, możesz sprawić, że użytkownicy zauważą dodaję 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 konieczności dodawania punktu skupienia.

Co to jest tabindex?

W takiej sytuacji musisz zmienić domyślną kolejność kart dostarczaną przez wbudowane karty. elementów, możesz użyć atrybutu HTML tabindex, aby wyraźnie ustawić na pozycji karty tego 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. Na tabindex, możesz wyraźnie określić kolejność elementów strony, które można zaznaczyć, wstawić w kolejności kart element, którego nie można zaznaczyć, i usunąć elementy od kolejności kart. Na przykład:

tabindex="0": wstawia element w naturalnej kolejności kart. Element można zaznaczyć, naciskając Tab, a można też wywołać jego 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 istnieje wiele elementów, w przypadku których parametr Tabindex jest większy niż 0, kolejność kart zaczyna się od najniższej wartości, która jest większa niż 0 i zwiększa swój zasięg. Użycie tabindex większego niż 0 jest uważane za wzór antypaterny.

Sprawdź, czy elementy sterujące są dostępne przy użyciu 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 zaznaczeniem 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 wskaż wybrany obszar treści i nadaj mu tabindex o wartości -1 i wywołaj jego metodę focus. Dzięki temu treści nie będą wyświetlane w naturalnej kolejności kart. Ta technika, zwana zarządzaniem skupieniem, pozwala zachować kontekstu postrzeganego przez użytkownika w stosunku do treści wizualnej 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.

Ustalenie, jakie zachowania klawiatury należy wdrożyć, może być trudne. 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 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, 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 tabindex="-1" do elementu nie ma wpływu na jego elementy podrzędne. jeśli wyświetlają się na karcie w sposób naturalny lub z powodu wartości tabindex, pozostają w kolejności kart. Aby usunąć element i wszystkie jego elementy podrzędne z kolejności kart, możesz użyć parametru kod polyfill inert protokołu WICG. Polyfill emuluje zachowanie proponowanego atrybutu inert. który zapobiega wybraniu i odczytaniu elementów 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 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 potrzebujesz aby element pojawił się wcześniej w kolejności tabulacji, powinien zostać przeniesiony na wcześniejsze miejsce w DOM.

Korzystając z Lighthouse, możesz rozpoznawać elementy za pomocą: tabindex > 0. Użycie Accessibility Audit (Lighthouse > Opcje > Ułatwienia dostępu) wyników typu „Żaden element nie ma wartości [tabindex] większej niż 0”

Użyj opcji „tabindex ruchome”.

Jeśli tworzysz złożony komponent, być może trzeba będzie dodać dodatkową klawiaturę i wsparcie wykraczające poza zakres. 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 wdrożyć podobne funkcje w swoich komponentach, możesz użyć metody znanej jako „podróż tabindex”. Przebieg indeksu Tabindex działa przez ustawienie parametru tabindex na -1 dla: wszystkich elementów podrzędnych oprócz obecnie aktywnego. Komponent używa klawiatury detektor zdarzeń pozwalający ustalić, który klawisz został naciśnięty przez użytkownika.

Gdy tak się dzieje, komponent ustawia poprzednio zaznaczone pole tabindex elementu podrzędnego na -1, ustawia tabindex dziecka skupionego na 0 i wywołuje funkcję 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, jaki poziom obsługi klawiatury mogą mieć komponenty niestandardowe znajdziesz w artykule Zasady tworzenia treści ARIA 1.1. W tym przewodniku wymienione są typowe wzorce interfejsu użytkownika oraz informacje o kluczach, których które komponenty powinny obsługiwać.