Wielu różnych użytkowników korzysta z klawiatury do poruszania się po aplikacjach – od użytkowników z tymczasową lub trwałą niepełnosprawnością ruchową po osoby, które używają skrótów klawiszowych, aby zwiększyć swoją wydajność. Logiczna kolejność kart to ważny element płynnej nawigacji przy użyciu klawiatury.
Testowanie ręczne
Aby sprawdzić, czy kolejność kart w aplikacji jest logiczna, spróbuj przejść na stronę klawiszem Tab. Kolejność, w jakiej zaznaczone są elementy, powinna być zgodna z kolejnością DOM. Ogólnie rzecz biorąc, układ powinien kierować się w kolejności czytania – od lewej do prawej, od góry do dołu strony.
Więcej informacji znajdziesz w artykule Podstawy korzystania z klawiatury.
Czy masz dostęp do wszystkich interaktywnych elementów sterujących na stronie?
Jeśli nie, użyj tabindex, aby poprawić ostrość tych ustawień.
Ogólna zasada jest taka, że wszystkie elementy sterujące, na które użytkownik może wchodzić w interakcje lub które mogą wprowadzać, powinny być dostępne do zaznaczenia i mieć wskaźnik fokusu.
Jeśli użytkownik klawiatury nie widzi zaznaczonego elementu, nie może wchodzić ze stroną w interakcję.
Rozwiązanie
Jeśli kolejność zaznaczenia wydaje się niewłaściwa, należy zmienić kolejność elementów w DOM, aby kolejność kart była bardziej naturalna.
Jeśli nie możesz uzyskać dostępu do wszystkich interaktywnych elementów sterujących na stronie, pierwszym sposobem na rozwiązanie problemu jest zastąpienie niestandardowych elementów sterujących standardowymi zamiennikami kodu HTML.
Na przykład zastąp element <div> działający jak przycisk <button>.
Korzystanie z wbudowanych elementów HTML może znacznie poprawić dostępność witryny i znacznie ograniczyć obciążenie pracą.
Jeśli tworzysz niestandardowe komponenty interaktywne bez ustandaryzowanego odpowiednika HTML, użyj atrybutu tabindex, by mieć pewność, że są one dostępne przy użyciu klawiatury.
Na przykład:
<div tabindex="0">Focus me with the TAB key</div>
Więcej informacji znajdziesz w artykule Kontrolowanie zaznaczenia za pomocą indeksu tabulacji.