Strona ma logiczną kolejność kart

Klawiaturę do nawigacji w aplikacjach wykorzystują różni użytkownicy, od osób z tymczasowymi i trwałymi zaburzeniami ruchowymi po użytkowników, którzy używają skrótów klawiszowych, aby zwiększyć wydajność i produktywność. Logiczna kolejność tabulatorów to ważna część płynnego poruszania się za pomocą klawiatury.

Jak przeprowadzić test ręczny

Aby sprawdzić, czy kolejność kart w aplikacji jest logiczna, przejdź przez karty. Kolejność wyświetlania elementów powinna być zgodna z kolejnością DOM. Zazwyczaj punkt skupienia powinien poruszać się zgodnie z kierunkiem czytania, czyli od lewej do prawej, od góry do dołu strony.

Więcej informacji znajdziesz w artykule Podstawowe informacje o dostępie z klawiatury.

Czy możesz korzystać ze wszystkich interaktywnych elementów sterujących na stronie? Jeśli nie, być może trzeba będzie użyć tabindex, aby poprawić ostrość tych ustawień. Ogólna zasada jest taka, że każdy element, z którym użytkownik może wchodzić w interakcję lub do którego może wprowadzać dane, powinien być elementem skupienia i mieć wskaźnik skupienia. Jeśli użytkownik korzystający z klawiatury nie widzi, na czym jest skupiony kursor, nie może wchodzić w interakcję ze stroną.

Rozwiązanie

Jeśli kolejność fokusowania wydaje się nieprawidłowa, uporządkuj elementy w DOM, aby kolejność kart była bardziej naturalna.

Jeśli nie możesz uzyskać dostępu do wszystkich elementów sterujących na stronie, pierwszym rozwiązaniem jest zastąpienie elementów niestandardowych ich standardowymi odpowiednikami w HTML. Przykład: zastąp element <div> działający jak przycisk elementem <button>. Dzięki wbudowanym elementom HTML możesz znacznie poprawić dostępność witryny, i znacznie ograniczyć obciążenie pracą.

Jeśli tworzysz niestandardowe komponenty interaktywne bez standardowego odpowiednika HTML, użyj atrybutu tabindex, aby mieć pewność, że możesz korzystać z klawiatury. Na przykład:

<div tabindex="0">Focus me with the TAB key</div>

Więcej informacji znajdziesz w artykule Zarządzanie fokusem za pomocą indeksu tabulacji.

Zasoby

Kod źródłowy kontroli Strona ma logiczną kolejność kart