Zachowanie logicznej kolejności kart jest ważnym elementem zapewniania użytkownikom płynnej nawigacji za pomocą klawiatury. Czytniki ekranu i inne technologie wspomagające poruszają się po stronie w kolejności DOM. Przepływ informacji powinien być sensowny.
Testowanie ręczne
Aby sprawdzić, czy kolejność kart w aplikacji jest logiczna, spróbuj przejść na stronę klawiszem Tab. Zasadniczo fokus powinien być ustawiony w kolejności czytania: od lewej do prawej, od góry do dołu strony.
Przy ocenianiu kolejności kart warto pamiętać o 2 głównych koncepcjach:
- Czy elementy w DOM są logiczne ułożone w kolejności logicznej?
- Czy treści spoza ekranu są prawidłowo ukryte przed nawigację?
Zwracaj uwagę na elementy nawigacji, które wydają się drażliwe. Zwróć też uwagę na skoki poza ekranem, które powodują przejście do treści, które nie powinny być widoczne.
Więcej informacji znajdziesz w artykule Podstawy korzystania z klawiatury.
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 używasz CSS do wizualnego zmiany położenia elementów, użytkownicy korzystający z technologii wspomagających będą mieli do czynienia z bezsensowną nawigacji. Zamiast używać CSS, przenieś element na wcześniejszą pozycję w DOM.
Jeśli treści poza ekranem są nadal dostępne przy użyciu klawiatury, rozważ usunięcie ich za pomocą tabindex="-1".
Więcej informacji znajdziesz w artykule Kontrolowanie zaznaczenia za pomocą indeksu tabulacji.
Zasoby
Kod źródłowy dla kontroli Kolejność wizualna na stronie jest zgodna z porządkiem DOM