Elementy interaktywne, takie jak linki i przyciski, powinny wskazywać swój stan i być łatwe do odróżnienia od elementów nieinteraktywnych. Aby sprawdzić, czy elementy interaktywne wskazują swój cel i stan, przeprowadź test wizualny i test czytnika ekranu.
Jak przeprowadzać testy ręczne
Interaktywne elementy należy przetestować wizualnie i za pomocą czytników ekranu.
Przetestuj ostrość obrazu
Aby ręcznie przetestować ostrość obrazu, naciskaj klawisz TAB po stronie.
- Czy do każdego elementu interaktywnego można przejść za pomocą klawisza TAB?
- Czy w przypadku elementów interaktywnych są widoczne wskazówki, że użytkownicy mogą z nimi wchodzić w interakcje?
- Czy po wybraniu każdy interaktywny element zmienia swój wygląd?
Istnieje wiele sposobów na określenie stylu wskaźników zaznaczenia każdego elementu interaktywnego.
Jednym ze sposobów jest określenie stylu pseudoklasy :focus.
Ten styl jest stosowany za każdym razem, gdy element jest aktywny, niezależnie od urządzenia wejściowego lub metody aktywacji.
Dowiedz się więcej o stylowaniu ostrości.
Testowanie za pomocą czytników ekranu
Użyj czytnika ekranu, aby poruszać się po stronie i sprawdź, czy czytnik ekranu wypowiada nazwę każdego interaktywnego elementu sterującego, jego rolę i bieżący stan interaktywny. Jeśli rola elementu jest niejasna, a jego stan jest niejasny, konieczne może być dodanie odpowiednich ról ARIA.
Więcej informacji znajdziesz w artykule Niestandardowe elementy mają przypisane role ARIA.
Zwróć też szczególną uwagę na etykiety elementów interaktywnych. Użytkownicy czytników ekranu i innych technologii wspomagających osoby z niepełnosprawnością korzystają z etykiet, aby poznać kontekst danego elementu. Nieprecyzyjne etykiety są powszechne i nie ułatwiają nawigacji po treściach. Dowiedz się, jak ulepszyć etykietę i tekst alternatywny.
Dlaczego to jest ważne
Dostarczenie wizualnych wskazówek dotyczących działania elementu sterującego może ułatwić użytkownikom obsługę i poruszanie się po witrynie. Takie wskazówki nazywamy możliwościami. Budżety umożliwiają użytkownikom korzystanie z Twojej witryny na różnych urządzeniach.
Zasoby
Kod źródłowy elementów interaktywnych wskazuje ich przeznaczenie i stan podczas kontroli