Elementy interaktywne, takie jak linki i przyciski, powinny określać swój stan i różnić się od elementów nieinteraktywnych. Aby sprawdzić, czy elementy interaktywne wskazują na ich przeznaczenie i stan, przeprowadź test wizualny i czytnik ekranu.
Jak ręcznie przetestować skupienie wzrokowe
Aby ręcznie sprawdzić skupienie wzroku,
TAB na stronie.
- Czy jesteś w stanie przejść do każdego interaktywnego elementu za pomocą klawisza Tab?
- Czy w przypadku elementu interaktywnego można zobaczyć wskazówkę, która wskazuje, że użytkownicy mogą wchodzić z nim w interakcję?
- Czy każdy element interaktywny zmienia wygląd po jego wybraniu?
Istnieje wiele sposobów na dostosowanie stylu wskaźników zaznaczenia do każdego elementu interaktywnego.
Jednym z pewnych sposobów jest skorzystanie z usługi :focus.
Pseudoklasa :focus pozwala zastosować do elementu jednolity styl.
Styl ten jest stosowany za każdym razem, gdy element jest zaznaczony, niezależnie od urządzenia wejściowego czy metody użytej do jego zaznaczenia.
Więcej informacji znajdziesz w sekcji Skupienie na stylizacji.
Ręczne testowanie za pomocą czytnika ekranu
Przejrzyj stronę za pomocą czytnika ekranu i sprawdź, czy czytnik może wypowiedzieć nazwę każdego interaktywnego elementu sterującego, rolę tego elementu oraz bieżący stan interakcji. Jeśli rola elementu jest niejasna, a stan elementu jest niejasny, konieczne może być dodanie odpowiednich ról ARIA. Więcej informacji znajdziesz w artykule Opcje niestandardowe mają role ARIA.
Ważne jest też, aby zwrócić szczególną uwagę na sposób etykietowania elementów interaktywnych. Użytkownicy czytników ekranu i innych technologii wspomagających osoby z niepełnosprawnością rozpoznają kontekst danego elementu za pomocą etykiet. Niejasne etykiety są powszechne i nie przydają się w poruszaniu się po treściach. Dowiedz się, jak ulepszyć etykiety i alternatywy tekstowe.
Dlaczego to jest ważne
Dostarczenie wizualnych wskazówek dotyczących działania elementu sterującego pomaga użytkownikom w obsłudze witryny i poruszaniu się po niej. Wskazówki te nazywamy afordancjami. Dzięki tym zasadom użytkownicy mogą korzystać z Twojej witryny na różnych urządzeniach.
Zasoby
Kod źródłowy elementów interaktywnych wskazuje ich przeznaczenie i stan