Sprawdź, czy wszystkie elementy sterujące niestandardowe mają odpowiednie atrybuty role i wszystkie wymagane atrybuty ARIA, które określają ich właściwości i stan.
Na przykład niestandardowe pole wyboru wymaga użycia właściwości role="checkbox" i aria-checked="true|false", aby prawidłowo przekazywać jego stan.
Dowiedz się, jak używać ARIA i HTML, aby dowiedzieć się, kiedy najlepiej dodać brakujące semantyczne atrybuty do niestandardowych elementów sterujących.
Jak przeprowadzić test
Aby sprawdzić, czy wszystkie niestandardowe elementy sterujące mają odpowiednie role ARIA, przetestuj stronę za pomocą panelu dostępności w Narzędziach deweloperskich Chrome lub czytnika ekranu.
JAWS i NVDA to 2 najpopularniejsze czytniki ekranu w systemie Windows. VoiceOver to czytnik ekranu wbudowany w system macOS.
Za pomocą CSS możesz nadawać styl elementom <div> i <button>, aby przekazywać te same możliwości wizualne, ale korzystanie z czytnika ekranu jest wtedy bardzo odmienne. <div> to tylko ogólny element grupowania, więc czytnik ekranu odczytuje tylko zawartość tekstową elementu <div>.
<button> jest ogłoszony jako „przycisk”, co jest znacznie wyraźniejszym sygnałem dla użytkownika, że może z nim wchodzić w interakcję.
Zobacz też Semantyka i czytniki ekranu.
Rozwiązanie
Najlepszym rozwiązaniem tego problemu jest unikanie wszystkich niestandardowych, interaktywnych elementów sterujących. Zastąp na przykład element <div>, który działa jak przycisk, rzeczywistym elementem <button>.
<button>Learn more</button>
Jeśli musisz użyć właściwości <div>, dodaj właściwości role="button" i aria-pressed="false".
<div role="button" aria-pressed="false">Learn more</div>
Czytniki ekranu ogłaszają teraz rolę i stan interaktywny elementu <div>.
Dlaczego to jest ważne
Jeśli nie korzystasz z technologii wspomagającej, możesz nie wiedzieć, jak Twoje treści działają w przypadku użytkowników takich technologii. Najlepiej skontaktować się z użytkownikami, którzy regularnie korzystają z technologii wspomagającej i mogą przekazać opinię na temat działania Twojej witryny lub aplikacji internetowej.
Innym sposobem na sprawdzenie, jak użytkownicy technologii wspomagających odbierają Twoje treści, jest testowanie z użyciem technologii wspomagającej. Korzystanie z czytnika ekranu pomoże Ci lepiej zrozumieć, jak Twoje treści są opisane i czy występują jakieś przeszkody w nawigacji.
Zasoby
Możesz sprawdzić kod źródłowy audyt niestandardowych elementów sterujących z rolami ARIA.