Sterowanie zaznaczeniem za pomocą indeksu tabulacji

Standardowe elementy HTML, takie jak <button> i <input>, mają ułatwienia dostępu za pomocą klawiatury i należy ich używać, gdy tylko jest to możliwe. Jeśli jednak musisz utworzyć niestandardowych elementów interaktywnych, możesz sprawić, że użytkownicy zauważą dodaję tabindex.

Obsługa przeglądarek

  • Chrome: 1.
  • Krawędź: 12.
  • Firefox: 1.5
  • Safari: ≤4.

Źródło

Dodaj element tabindex tylko do interaktywnych treści. Nawet jeśli treść takich jak obraz klucza, użytkownicy czytników ekranu mogą go zrozumieć bez i dodaje zaznaczenie.

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.

Pole tabindex może być stosowane do dowolnego elementu, ale powinno być stosowane tylko do elementów interaktywnych i przyjmuje 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 tabulacji. Element może można zaznaczyć, naciskając klawisz Tab. Można go aktywować, wywołując jego metody focus().

tabindex="-1": usuwa element z naturalnej kolejności tabulacji, ale sam element można zaznaczyć, wywołując jego metodę focus()

tabindex="5": każdy element tabindex większy niż 0 przenosi element na wierzch w naturalnej kolejności tabulacji. 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 indeksu tabindex większego niż 0 jest uważane za antywzorek.

Sprawdź, czy elementy sterujące są dostępne przy użyciu klawiatury

Narzędzie takie jak Lighthouse świetnie sprawdza się w automatycznym wykrywaniu określonych ułatwień dostępu. jednak niektóre testy nadal muszą być wykonywane ręcznie przez człowieka.

Aby poruszać się po witrynie, naciśnij klawisz Tab. Czy możesz skontaktować się z wszystkie interaktywne elementy sterujące na stronie? Jeśli nie, może być konieczne użycie tabindex aby poprawić ostrość tych elementów sterujących.

Zarządzanie zaznaczeniem na poziomie strony

Czasami tabindex pomaga zadbać o wygodę użytkowników. Przykład: jeśli tworzysz solidną pojedynczą stronę z różnymi sekcjami, gdzie niektóre jest ukryta w różnych miejscach wczytywania strony. Może to oznaczać, powodują zmianę widocznej treści 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ą pojawiać się w naturalnej kolejności tabulacji. 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 trzeba też kontrolować koncentrację na poziomie kontrolnym, np. Elementy niestandardowe.

Ustalenie, jakie zachowania klawiatury należy wdrożyć, może być trudne. Tworzenie aplikacji z dostępem do multimediów (ARIA) Praktyki w przewodniku wymienione są typy komponentów i obsługiwane przez nie działania 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 za pomocą właściwości tabindex="-1". Na przykład:

<button tabindex="-1">Can't reach me with the TAB key!</button>

Spowoduje to usunięcie elementu z zwykłej kolejności tabulacji, ale nadal będzie można go za pomocą wywołania metody 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

Każda wartość tabindex większa niż 0 przeskakuje element na pierwszy plan karty naturalnej. zamówienie. Jeśli jest wiele elementów z wartością tabindex większą od 0, kolejność rozpoczyna się od najmniejszej wartości większej od 0 i zwiększa się.

Użycie wartości tabindex większej niż 0 jest uważane za antywzorcę, ponieważ czytniki ekranu poruszają się po stronie w kolejności DOM, a nie kolejności tabulacji. 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 „podróż przez tabindex

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. Jest można zaznaczyć i umożliwić korzystanie z klawiszy strzałek w celu wyświetlenia dodatkowych elementów do wyboru .

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