Brak wymaganego atrybutu ARIA

Silktide sprawdza elementy deklarujące rolę ARIA i weryfikuje, czy zawierają również atrybuty wymagane przez tę rolę. Niektóre role są bezużyteczne bez swoich atrybutów, na przykład suwak, który nigdy nie podaje ustawionej wartości.

<!-- Problem: suwak musi udostępniać swoją bieżącą wartość -->
<div role="slider" tabindex="0"></div>

<!-- Poprawka: podaj wymagany stan -->
<div role="slider" tabindex="0"
     aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></div>

Dlaczego to jest ważne

Nadanie elementowi roli jest obietnicą: „to jest suwak”, „to jest pole wyboru”. Role takie jak te wymagają atrybutów stanu, ponieważ bez nich obietnica jest pusta — trafia na pole wyboru i nie może stwierdzić, czy jest zaznaczone, albo na suwak i nie może poznać jego wartości ani zakresu. Kontrolka jest ogłaszana, może otrzymać fokus i nie da się z niej korzystać.

Jak to naprawić

Dodaj atrybuty wymagane przez rolę i aktualizuj je za pomocą skryptu wraz ze zmianą stanu kontrolki — statyczne aria-checked="false" w działającym polu wyboru wprowadza w błąd tak samo jak całkowity brak tego atrybutu.
Jeśli istnieją, preferuj natywne elementy : <input type="checkbox"> i <input type="range"> automatycznie udostępniają swój stan, bez konieczności utrzymywania ARIA.

Jak Silktide to testuje

Znajduje każdy element na stronie, który deklaruje atrybut role.
Sprawdza, jakich atrybutów ARIA 1.2 wymaga dla tej roli — na przykład role="checkbox" wymaga aria-checked, a role="slider" wymaga aria-valuenow. Gdy atrybut role zawiera kilka ról, rolą elementu jest pierwsza z nich zdefiniowana przez ARIA 1.2, tak jak w przeglądarkach.
Pomija przypadki, w których element udostępnia stan natywnie: prawdziwe pole wyboru lub przycisk opcji zawiera już stan zaznaczenia, natywny <option> — stan wybrania, natywny <input type="range"> lub <meter> — swoją wartość, a suwak z aria-valuetext może nie zawierać aria-valuenow.
Wymaga aria-valuenow dla role="separator" tylko wtedy, gdy można uzyskać na nim fokus za pomocą klawiatury, jak w przypadku przeciągalnego separatora między dwoma panelami. Separator, który tylko dzieli treść, nie potrzebuje żadnych atrybutów.
Zgłasza każdy element, w którym brakuje wymaganego atrybutu. Atrybut pozostawiony pusty, taki jak aria-checked="", jest traktowany jako brakujący, ponieważ przeglądarki ignorują pustą wartość.

Rozwiązywanie problemów

Skrypt ustawia atrybut po załadowaniu strony

Silktide testuje stronę podczas jej ładowania. Jeśli widżet dodaje atrybuty stanu dopiero przy pierwszej interakcji, do tego czasu użytkownicy słyszą kontrolkę bez stanu — zamiast tego wyrenderuj stan początkowy na stronie.