Korzystanie z indeksu tabulacji

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

Domyślna kolejność kart związana z położeniem DOM semantycznych elementów HTML to ale czasem musisz zmienić kolejność kart. Ruchoma elementy w kodzie HTML są idealne, ale mogą nie być możliwe. W takich przypadkach może używać atrybutu HTML tabindex, aby bezpośrednio ustawić kartę elementu pozycji.

Pole tabindex można stosować do dowolnego elementu, choć nie jest to konieczne przydatny w każdym elemencie i przyjmuje zakres liczb 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 jej 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.

Dotyczy to zwłaszcza elementów, które nie są danymi wejściowymi, takich jak nagłówki, obrazy czy artykuł. tytuły. Jeśli to możliwe, najlepiej tak uporządkować kod źródłowy, by sekwencja DOM zapewniała logiczną kolejność tabulacji. Jeśli używasz aplikacji tabindex, ogranicz ją do niestandardowej interakcji interaktywnej elementy sterujące, takie jak przyciski, karty, menu i pola tekstowe; czyli elementów użytkownik może oczekiwać danych wejściowych.

Dodaj element tabindex tylko do interaktywnych treści. Nawet jeśli treść jest ważna, np. kluczowy obraz, użytkownicy czytników ekranu mogą ją zrozumieć bez i dodaje zaznaczenie.

Zarządzanie zaznaczeniem na poziomie strony

Czasami do zapewnienia wygody użytkownikom wymagana jest właściwość tabindex. Przykład: podczas tworzenia solidnej, pojedynczej strony z różnymi sekcjami treści. cała zawartość jest jednocześnie widoczna. Może to oznaczać linki nawigacyjne zmienić widoczną zawartość 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. komponentów niestandardowych.

Na przykład element select może być zaznaczony, ale raz użyj klawiszy strzałek, aby wyświetlić dodatkowe opcje. Jeśli tworzysz niestandardowy element select, pamiętaj, aby go powielić. więc użytkownicy klawiatury nadal mogą wchodzić w interakcje z elementem sterującym.

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.

Może pracujesz nad elementami niestandardowymi, które wyglądają jak zestaw przycisków, ale mają unikalny wygląd zachowanie użytkownika.

<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 potrzebuje, zapoznaj się z Metody tworzenia ARIA . Sekcja 2 zawiera listę wzorców projektowych, w tym tabela charakterystyki radia grup, z istniejącego komponentu, który najbardziej pasuje do nowego elementu.

Jedna z typowych czynności klawiatury, której są obsługiwane klawisze strzałek w górę/dół/lewo/prawo. Aby dodać to zachowanie do nowych Stosujemy metodę o nazwie przewijający się tabindex.

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

<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 tak się dzieje, ustawiany jest wcześniej ustawiony element podrzędny tabindex ma wartość -1, ustawia tabindex dziecka skupionego na 0 i wywołuje funkcję użyj metody skupienia się na całości.

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

Kiedy użytkownik dotrze do ostatniego miejsca (lub po raz pierwszy, w zależności od kierunku przesunięcie ostrości) dziecko, powrót do pierwszego (lub ostatniego miejsca) dziecka.

Skorzystaj z poniższego przykładu. Sprawdź element w za pomocą Narzędzi deweloperskich, aby obserwować przechodzenie z jednego radia do drugiego.

Moduły i pułapki na klawiaturę

Lepiej unikać ręcznego zarządzania ostrością, ponieważ może to prowadzić do skomplikowanych sytuacji. Na przykład widżet autouzupełniania, który próbuje zarządzać zaznaczeniem i zapisami działanie karty, ale uniemożliwia użytkownikowi jej opuszczenie, dopóki proces nie zostanie ukończony. 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 nie należy blokować elementów z klawiatury ani ograniczone do jednego konkretnego elementu strony. Użytkownik powinien mieć możliwość przechodzenia do wszystkich elementów strony i opuszczania ich przy użyciu klawiatury.

Wyjątkiem od tej reguły są pola modalne. Nadal jednak należy unikać stosowania tabindex podczas tworzenia okna modalnego. Dzięki inert możesz: są niedozwolone, aby użytkownicy nie mogli przypadkowo wchodzić w interakcję z elementem (cel pułapka klawiatury). Korzystanie z <dialog> , który jest domyślnie bezczynny, tworzy okno modalne dla użytkowników, blokując jednocześnie kliknięcia i tabulatory poza obszarem modalnym. Dzięki temu użytkownik może skupić się na wymagane jest zaznaczenie.