Domyślna kolejność kart związana z położeniem DOM semantycznych elementów HTML jest wygodna, ale czasami trzeba ją zmienić. Przenoszenie elementów w kodzie HTML jest idealne, ale może nie być możliwe. W takich przypadkach możesz użyć atrybutu HTML tabindex, aby wyraźnie ustawić pozycję karty elementu.
tabindex można zastosować do dowolnego elementu, ale niekoniecznie w każdym z nich. Przyjmuje zakres wartości całkowitych. Za pomocą tabindex możesz określić wyraźną kolejność elementów strony, które można zaznaczyć, wstawić w kolejności kart element, którego nie można zaznaczyć, i usunąć elementy z tej kolejności. Na przykład:
tabindex="0": wstawia element w naturalnej kolejności tabulacji. Aby zaznaczyć element, naciśnij Tab. Można go zaznaczyć, wywołując jego metodę focus().
tabindex="-1": usuwa element z naturalnej kolejności kart, ale nadal można go zaznaczyć, wywołując jego metodę focus()
tabindex="5": każdy element tabindex większy niż 0 przenosi element na początek zwykłej kolejności tabulacji. Jeśli istnieje wiele elementów, których indeks tabulacji jest większy niż 0, kolejność kart zaczyna się od najniższej wartości większej niż 0 i przesuwa się w górę. Używanie indeksu tabindex większego niż 0 jest uznawane za antywzorce.
Dotyczy to zwłaszcza elementów, które nie są danymi do wprowadzania danych, takich jak nagłówki, obrazy czy tytuły artykułów. Jeśli to możliwe, najlepiej uporządkować kod źródłowy w taki sposób, aby sekwencja DOM zapewniała logiczną kolejność tabulatorów. Jeśli używasz elementu tabindex, ogranicz go do niestandardowych interaktywnych elementów sterujących, takich jak przyciski, karty, menu i pola tekstowe, czyli elementy, do których użytkownik może oczekiwać danych wejściowych.
Dodaj element tabindex tylko do interaktywnych treści. Nawet jeśli treść jest ważna, na przykład najważniejszy obraz, użytkownicy czytników ekranu mogą ją zrozumieć bez zaznaczania tekstu.
Zarządzanie zaznaczeniem na poziomie strony
Czasami do zapewnienia wygody użytkownikom wymagana jest właściwość tabindex. Na przykład gdy tworzysz rozbudowaną pojedynczą stronę z różnymi sekcjami treści, gdy nie wszystkie treści są widoczne jednocześnie. Może to oznaczać, że linki nawigacyjne
zmieniają widoczną treść bez odświeżania strony.
W tym przypadku wskaż wybrany obszar treści, nadaj mu wartość tabindex o wartości -1 oraz wywołaj jego metodę focus. Dzięki temu treści nie będą wyświetlać się
w naturalnej kolejności elementów tabulacji. Ta technika, zwana zarządzaniem skupieniem, pozwala synchronizować postrzegany przez użytkownika kontekst z treściami wizualnymi w witrynie.
Zarządzanie fokusem w komponentach
W niektórych przypadkach trzeba też kontrolować ostrość na poziomie sterowania, np. za pomocą komponentów niestandardowych.
Na przykład element select może zostać wyróżniony w sposób podstawowy, ale gdy już go znajdzie, możesz użyć klawiszy strzałek, aby wyświetlić dodatkowe opcje do wyboru.
Jeśli utworzysz niestandardowy element select, musisz odtworzyć jego działanie, aby użytkownicy klawiatury mogli w dalszym ciągu korzystać z elementu sterującego.
Ustalenie, jakie zachowania klawiatury należy wdrożyć, może być trudne. Przewodnik po metodach tworzenia aplikacji z dostępem do Rich Internetu (ARIA) zawiera listę typów komponentów i obsługiwanych przez nie działań klawiatury.
Może pracujesz nad elementami niestandardowymi, które przypominają zestaw przycisków, ale różnią się wyglądem i działaniem.
<radio-group>
<radio-button>Water</radio-button>
<radio-button>Coffee</radio-button>
<radio-button>Tea</radio-button>
<radio-button>Cola</radio-button>
<radio-button>Ginger Ale</radio-button>
</radio-group>
Aby dowiedzieć się, jakiej obsługi klawiatury potrzebują, przeczytaj przewodnik po metodach tworzenia ARIA. Sekcja 2 zawiera listę wzorców projektowych, w tym tabelę cech dla grup radiowych, czyli istniejący komponent, który najlepiej pasuje do nowego elementu.
Jedną z typowych funkcji klawiatury są klawisze strzałek w górę, w dół, w lewo i w prawo. Aby dodać takie zachowanie do nowego komponentu, stosujemy metodę przewijania tabindex.
Przepływowy tag Tabindex działa przez ustawienie zasady tabindex na -1 w przypadku wszystkich elementów podrzędnych z wyjątkiem aktywnego obecnie elementu.
<radio-group>
<radio-button tabindex="0">Water</radio-button>
<radio-button tabindex="-1">Coffee</radio-button>
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
Komponent używa detektora zdarzeń klawiatury, aby określić, który klawisz naciśnie użytkownik. Gdy tak się dzieje, ustawia on wartość tabindex wcześniej wybranego elementu na -1, ustawia tabindex elementu tabindex na potrzeby skupienia na 0 i wywołuje metodę fokusu.
<radio-group>
<!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
<radio-button tabindex="-1">Water</radio-button>
<radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
Gdy użytkownik dotrze do ostatniego (lub po raz pierwszy, w zależności od kierunku, w którym się porusza) dziecka, pętla powrót do pierwszego (lub ostatniego) elementu podrzędnego.
Skorzystaj z poniższego przykładu. Sprawdź element w Narzędziach deweloperskich, by zobaczyć, jak zmienia się indeks tabindex z jednej opcji do drugiej.
Moduły i pułapki na klawiaturę
Lepiej unikać ręcznego zarządzania ostrością, ponieważ może to prowadzić do skomplikowanych sytuacji. Może to być na przykład widżet autouzupełniania, który próbuje zarządzać zaznaczeniem i rejestruje zachowanie karty, ale uniemożliwia użytkownikowi zamknięcie okna, dopóki proces się nie zakończy. Jest to tak zwane pułapka na klawiaturze i może być bardzo frustrująca dla użytkownika.
Zgodnie z artykułem 2.1.2 ustawy WCAG zaznaczenie klawiatury nie powinno być zablokowane ani ograniczone do konkretnego elementu strony. Użytkownik powinien mieć możliwość przechodzenia do wszystkich elementów strony i z niego za pomocą samej klawiatury.
Wyjątkiem od tej reguły są pola modalne. Podczas tworzenia pliku modalnego należy jednak unikać używania właściwości tabindex. inert pozwala zapobiegać przypadkowemu wchodzeniu w interakcję z elementem (celową pułapką klawiatury). Użyj elementu <dialog>, który jest domyślnie bezczynny, do utworzenia interfejsu modalnego dla użytkowników, a jednocześnie do blokowania kliknięć i kart poza tym oknem. Dzięki temu użytkownik będzie mógł skupić się
na wymaganym polu wyboru.