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.