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ść. Logiczny porządek kart jest ważnym elementem zapewnienia płynnego korzystania z klawiatury.

Jak przeprowadzić test ręczny

Aby sprawdzić, czy kolejność kart w aplikacji jest logiczna, przejdź przez karty. Kolejność elementów, na których skupia się użytkownik, powinna być zgodna z kolejnością w 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 Podstawy dostępu za pomocą klawiatury.

Czy możesz korzystać ze wszystkich interaktywnych elementów sterujących na stronie? Jeśli nie, może być konieczne użycie tabindex, aby ułatwić skupienie się na tych elementach sterujących. 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 wyświetlać 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, zmodyfikuj kolejność elementów w DOM, aby uporządkować kolejność kart.

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. Na przykład zastąp element <div>, który działa jak przycisk, elementem <button>. Korzystanie z wbudowanych elementów HTML może znacznie poprawić dostępność witryny i znacznie zmniejszyć nakład pracy.

Jeśli tworzysz niestandardowe interaktywne komponenty, które nie mają standardowego odpowiednika w HTML, użyj atrybutu tabindex, aby zapewnić ich dostępność za pomocą 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 audytu Strona ma logiczny układ kart