Sprawdź, czy wszystkie niestandardowe ustawienia mają odpowiednie role i wszystkie wymagane atrybuty ARIA, które przyznają ich właściwości i stan.
Na przykład do prawidłowego przekazywania stanu niestandardowego pola wyboru wymagane są atrybuty role="checkbox" i aria-checked="true|false".
Ogólne omówienie tego, jak ARIA może dodać brakujące semantykę do ustawień niestandardowych, znajdziesz we wprowadzeniu do ARIA.
Testowanie ręczne
Aby sprawdzić, czy wszystkie niestandardowe elementy sterujące mają odpowiednie role ARIA, przetestuj stronę za pomocą okienka ułatwień dostępu w Chrome DevTools 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żna dostosować styl elementów <div> i <button> w taki sposób, aby przekazywały te same afordancje wizualne. Jednak korzystanie z czytnika ekranu znacznie się różni.
<div> to po prostu ogólny element grupujący, więc czytnik ekranu wypowie tylko tekst dotyczący elementu <div>.
Element <button> jest przedstawiany jako „przycisk”. Jest to znacznie silniejszy sygnał dla użytkownika, że może w nim wchodzić w interakcję.
Zobacz też Semantyki i czytniki ekranu.
Rozwiązanie
Najprostszym i często najlepszym rozwiązaniem tego problemu jest całkowite unikanie niestandardowych elementów interaktywnych.
Zastąp np. element <div>, który działa jak przycisk, <button>.
Jeśli musisz zachować <div>, dodaj role="button" i aria-pressed="false" do <div>.
Teraz czytniki ekranu rozpoznają rolę i stan interakcji użytkownika <div>.
Dlaczego to jest ważne
Jedynym sposobem, aby zrozumieć, jak Twoje treści są treści dla użytkowników technologii wspomagających, jest samodzielne ich sprawdzenie za pomocą czytnika ekranu. Korzystanie z czytnika ekranu pozwoli Ci łatwo zrozumieć, jak oznaczone są Twoje treści i czy nic nie przeszkadza w ułatwianiu nawigacji po technologii. Jeśli nie wiesz, jak znaczniki semantyczne są interpretowane przez technologie wspomagające, zapoznaj się z artykułem Wprowadzenie do semantyki, który zawiera więcej informacji.
Zobacz też Jak sprawdzić ułatwienia dostępu.