Korzystanie z indeksu tabulacji

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

Domyślna kolejność kart zapewniana przez pozycję DOM elementów semantycznych HTML jest wygodna, ale czasami trzeba zmodyfikować kolejność kart. Przenoszenie elementów w kodzie HTML jest idealnym rozwiązaniem, ale może nie być możliwe. W takich przypadkach możesz użyć atrybutu HTML tabindex, aby jednoznacznie ustawić pozycję elementu na karcie.

tabindex można zastosować do dowolnego elementu, ale niekoniecznie w każdym z nich. Przyjmuje 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ę.

Dotyczy to zwłaszcza elementów bez możliwości wprowadzania danych, takich jak nagłówki, obrazy czy tytuły artykułów. W miarę możliwości warto uporządkować kod źródłowy tak, aby sekwencja DOM zapewniała logiczną kolejność kart. Jeśli używasz tabindex, ogranicz go do niestandardowych elementów sterujących, takich jak przyciski, karty, menu i pola tekstowe, czyli elementów, w których użytkownik może wprowadzać dane.

Dodawaj tabindex tylko do treści, które są interaktywne. Nawet jeśli treść jest ważna, np. kluczowy obraz, użytkownicy czytników ekranu mogą ją zrozumieć bez dodawania punktu skupienia.

Zarządzanie fokusem na poziomie strony

Czasami do zapewnienia wygody użytkownikom wymagana jest właściwość tabindex. Jeśli np. utworzysz obszerną stronę z różnymi sekcjami treści, w których nie wszystkie treści są widoczne jednocześnie. Może to oznaczać, że linki nawigacyjne zmieniają widoczną zawartość bez odświeżania strony.

W tym przypadku należy zidentyfikować wybrany obszar treści i przypisać mu tabindex o wartości -1 oraz wywołać metodę focus. Dzięki temu treści nie będą wyświetlane w naturalnej kolejności kart. 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 musisz też zarządzać ostrością na poziomie elementów sterujących, np. w przypadku komponentów niestandardowych.

Na przykład element select może być podstawowym elementem skupienia, ale po jego wybraniu możesz użyć klawiszy strzałek, aby wyświetlić dodatkowe opcje. Jeśli tworzysz niestandardowy element select, ważne jest, aby odtworzyć jego zachowanie, aby użytkownicy korzystający z klawiatury mogli nadal wchodzić w interakcję z Twoim elementem sterującym.

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.

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ę, jakiego wsparcia klawiatury potrzebują, zapoznaj się z przewodnikiem ARIA Authoring Practices. Sekcja 2 zawiera listę wzorów projektowych, w tym tabelę z charakterystycznymi właściwościami grup radiowo-adresowych oraz istniejący komponent, który najbardziej 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ć to zachowanie do nowego komponentu, używamy techniki zwanej roamingowy tabindex.

Przenośny indeks Tabindex działa przez ustawienie zasady tabindex na -1 w przypadku wszystkich elementów podrzędnych z wyjątkiem aktywnego obecnie zasobu.

<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 odbiornika zdarzeń klawiatury, aby określić, który klawisz naciska użytkownik. Gdy to nastąpi, ustawia wartość tabindex poprzednio skupionego elementu potomnego na -1, wartość tabindex elementu potomnego, który ma być skupiony, na 0 i wywołuje metodę focus tego elementu.

<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 pierwszego, w zależności od kierunku przesuwania fokusa) elementu podrzędnego, fokus wraca do pierwszego (lub ostatniego) elementu podrzędnego.

Wypróbuj ten przykład. Sprawdź element w Narzędziach deweloperskich, by zobaczyć, jak zmienia się indeks tabindex z jednej opcji do drugiej.

Modalności i pułapki klawiszowe

Unikaj ręcznego ustawiania 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ć fokusem i rejestruje zachowanie karty, ale uniemożliwia użytkownikowi jej opuszczenie, dopóki nie zostanie ukończone. Jest to tzw. pułapka na klawiaturę i może być bardzo irytują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ść poruszania się po wszystkich elementach strony za pomocą tylko klawiatury.

Wyjątkiem od tej zasady są modale. Podczas tworzenia modala należy jednak unikać korzystania z elementu tabindex. inert pozwala zapobiegać przypadkowemu wchodzeniu w interakcję z elementem (celową pułapką klawiatury). Użyj elementu <dialog>, który jest domyślnie nieaktywny, aby utworzyć okno modalne dla użytkowników, blokując kliknięcia i karty poza tym oknem. Umożliwia to użytkownikowi skupienie się na wymaganym wyborze.