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