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 nie zawsze jest to przydatne. Funkcja ta 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, które nie wymagają 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 tabindex jest niezbędna do zapewnienia płynnej obsługi. Jeśli np. utworzysz obszerną stronę z różnymi sekcjami treści, w której 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 zidentyfikuj wybrany obszar treści i przypisz mu tabindex -1, a następnie wywołaj metodę focus. Dzięki temu treści nie będą wyświetlane w naturalnej kolejności kart. Ta technika, zwana zarządzaniem punktem ciężkości, zapewnia spójność postrzeganego kontekstu użytkownika z elementami wizualnymi witryny.

Zarządzanie punktem skupienia w komponentach

W niektórych przypadkach musisz też zarządzać punktem skupienia 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.

Trudno jest określić, które zachowania klawiatury należy zaimplementować. 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 opcji, ale mają niepowtarzalny wygląd i działanie.

<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ę cech grup radiowo-selektywnych oraz istniejący komponent, który najbardziej pasuje do nowego elementu.

Jednym z częstych zachowań klawiatury, które powinno być obsługiwane, jest obsługa klawiszy strzałek w górę/w dół/w lewo/w prawo. Aby dodać to zachowanie do nowego komponentu, używamy techniki zwanej przemieszczanie tabindex.

Przemieszczający się tabindex działa przez ustawienie tabindex na -1 we wszystkich elementach podrzędnych z wyjątkiem aktywnego.

<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 zostać skoncentrowany, 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 DevTools, aby zobaczyć, jak tabindex przechodzi z jednego pola wyboru do następnego.

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 nie pozwala użytkownikowi jej zamknąć, dopóki nie zostanie ukończony. Jest to tzw. pułapka na klawiaturę i może być bardzo irytująca dla użytkownika.

Sekcja 2.1.2 WCAG stwierdza, że punkt skupienia klawiatury nie powinien być zablokowany ani uwięziony w jednym konkretnym elemencie 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. Dzięki inert możesz zadbać o to, aby użytkownicy nie mogli przypadkowo wejść w interakcję z elementem (celowe pułapki na klawiaturę). 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. Dzięki temu użytkownik może skupić się na wymaganym wyborze.