Korzystanie z indeksu tabulacji

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

Domyślna kolejność tabulacji określona przez pozycję semantycznych elementów HTML w DOM jest wygodna, ale czasami może być konieczne jej zmodyfikowanie. Przenoszenie elementów w HTML-u jest idealnym rozwiązaniem, ale może być niemożliwe. W takich przypadkach możesz użyć atrybutu HTML tabindex, aby jednoznacznie określić pozycję elementu na liście elementów, po których można się poruszać za pomocą klawisza Tab.

tabindex można zastosować do dowolnego elementu, chociaż niekoniecznie jest to przydatne w przypadku każdego z nich. Przyjmuje on zakres wartości całkowitych. Za pomocą atrybutu tabindex możesz określić kolejność elementów strony, na których można ustawić fokus, wstawić do kolejności tabulacji element, na którym w inny sposób nie można ustawić fokusu, oraz usunąć elementy z kolejności tabulacji. Na przykład:

tabindex="0": wstawia element w naturalnej kolejności tabulacji. Element można zaznaczyć, naciskając Tab, lub wywołując jego metodę focus().

tabindex="-1": usuwa element z naturalnej kolejności tabulacji, ale element nadal może być aktywny, jeśli wywołasz jego metodę focus().

tabindex="5": Każda wartość atrybutu tabindex większa niż 0 przenosi element na początek naturalnej kolejności tabulacji. Jeśli istnieje wiele elementów z atrybutem tabindex o wartości większej niż 0, kolejność tabulacji zaczyna się od najmniejszej wartości większej od zera i wzrasta.

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

Dodawaj symbol tabindex tylko do treści interaktywnych. Nawet jeśli treść jest ważna, np. kluczowy obraz, użytkownicy czytników ekranu mogą ją zrozumieć bez dodawania fokusu.

Zarządzanie fokusem na poziomie strony

Czasami tabindex jest niezbędne do zapewnienia płynnego działania. Na przykład, jeśli tworzysz rozbudowaną pojedynczą 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ą treść bez odświeżania strony.

W tym przypadku określ wybrany obszar treści i nadaj mu tabindex-1, a następnie wywołaj jego metodę focus. Dzięki temu treść nie będzie wyświetlana w naturalnej kolejności tabulacji. Ta technika, zwana zarządzaniem zaznaczeniem, zapewnia synchronizację kontekstu postrzeganego przez użytkownika z treścią wizualną witryny.

Zarządzanie fokusem w komponentach

W niektórych przypadkach musisz też zarządzać fokusem na poziomie komponentu, np. w przypadku komponentów niestandardowych.

Na przykład element select może otrzymać podstawowe zaznaczenie, ale po jego zaznaczeniu możesz użyć klawiszy strzałek, aby wyświetlić dodatkowe opcje do wyboru. Jeśli tworzysz niestandardowy element select, ważne jest, aby odtworzyć to zachowanie, aby użytkownicy klawiatury mogli nadal wchodzić w interakcje z Twoim elementem sterującym.

Określenie, które zachowania klawiatury należy wdrożyć, może być trudne. W przewodniku Accessible Rich Internet Applications (ARIA) Authoring Practices znajdziesz listę typów komponentów i rodzajów obsługiwanych przez nie działań klawiatury.

Możesz na przykład pracować nad elementami niestandardowymi, które przypominają zestaw przycisków opcji, ale mają unikalny wygląd i zachowanie.

<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 określić, jakie wsparcie klawiatury jest potrzebne, zapoznaj się z przewodnikiem ARIA Authoring Practices. Sekcja 2 zawiera listę wzorców projektowych, w tym tabelę charakterystyki grup przycisków radiowych oraz istniejący komponent, który najbardziej pasuje do nowego elementu.

Jednym z najczęstszych zachowań klawiatury, które powinny być obsługiwane, są klawisze strzałek w górę, w dół, w lewo i w prawo. Aby dodać to zachowanie do nowego komponentu, używamy techniki o nazwie roving tabindex.

Funkcja roving tabindex działa poprzez ustawienie wartości tabindex na -1 dla wszystkich elementów podrzędnych z wyjątkiem aktualnie 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 detektora zdarzeń klawiatury, aby określić, który klawisz naciska użytkownik. Gdy to nastąpi, ustawia wartość tabindex poprzednio zaznaczonego elementu podrzędnego na -1, ustawia wartość tabindex elementu podrzędnego, który ma zostać zaznaczony, na 0 i wywołuje na nim metodę focus.

<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, w którym przesuwa fokus) elementu podrzędnego, fokus wraca do pierwszego (lub ostatniego) elementu podrzędnego.

Wypróbuj ten przykład. Sprawdź element w narzędziach deweloperskich, aby zobaczyć, jak indeks tabulacji przechodzi z jednego przycisku radiowego na drugi.

Okna modalne i pułapki klawiaturowe

Najlepiej unikać ręcznego zarządzania ostrością, ponieważ może to prowadzić do skomplikowanych sytuacji. Przykład: widżet autouzupełniania, który próbuje zarządzać fokusem i przechwytuje zachowanie karty, ale uniemożliwia użytkownikowi opuszczenie go, dopóki nie zostanie ukończony. Nazywa się to pułapką klawiatury i może być bardzo frustrujące dla użytkownika.

Sekcja 2.1.2 wytycznych WCAG mówi, że fokus klawiatury nigdy nie powinien być zablokowany ani uwięziony w jednym konkretnym elemencie strony. Użytkownik powinien mieć możliwość przechodzenia do wszystkich elementów strony i z nich za pomocą samej klawiatury.

Wyjątkiem od tej reguły są okna modalne. Podczas tworzenia okna modalnego należy jednak unikać używania znaku tabindex. Za pomocą inert możesz zapobiec przypadkowemu wejściu użytkownika w interakcję z elementem (celowa pułapka klawiaturowa). 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.