Nieprawidłowa wartość atrybutu ARIA

Silktide sprawdza wartość każdego atrybutu ARIA na Twoich stronach pod kątem wartości dozwolonych przez standard. Atrybut z nieprawidłową wartością, na przykład stan pola wyboru „yes” zamiast „true”, jest ignorowany przez przeglądarki, więc opisywany przez niego stan nigdy nie jest ogłaszany.

<!-- Problem: „yes” nie jest prawidłową wartością, stan zostaje pominięty -->
<div role="checkbox" aria-checked="yes">Subskrybuj</div>

<!-- Poprawka: użyj zdefiniowanego tokenu -->
<div role="checkbox" aria-checked="true">Subskrybuj</div>

Dlaczego to jest ważne

Każdy atrybut dokładnie określa, jakie wartości akceptuje, a przeglądarki odrzucają wszystko inne, zamiast zgadywać. Błędy to zwykle intuicyjnie wyglądające wartości — aria-expanded="1", aria-checked="yes", aria-level="0" — które przechodzą każdy test wizualny, podczas gdy użytkownicy otrzymują kontrolkę bez ogłoszonego stanu: menu, które nigdy nie informuje, czy jest otwarte, lub pole wyboru, które nigdy nie informuje, czy jest zaznaczone.

Jak to naprawić

Zastąp nieformalne wartości tokenami zdefiniowanymi przez atrybut: true i false zamiast yes, no, 1 lub 0.
Sprawdź atrybuty numeryczne: atrybuty zliczające, takie jak aria-level i aria-rowindex, zaczynają się od 1, a nie od 0.

Dokładne wartości dozwolone dla każdego atrybutu znajdują się w referencji atrybutów ARIA w MDN.

Jak Silktide to testuje

Znajduje każdy element na stronie, który ma co najmniej jeden atrybut aria-.
Sprawdza wartość każdego atrybutu względem typu zdefiniowanego dla niego przez ARIA 1.2: atrybuty true/false, atrybuty trójstanowe, takie jak aria-checked i aria-pressed (true, false, mixed lub undefined, co oznacza, że stan nie jest ustawiony), liczby i liczby całkowite oraz atrybuty z ustalonymi listami słów, takie jak aria-live i aria-current.
Zgłasza każdą wartość, która nie jest zgodna, wskazując, czego oczekiwano.

Atrybut pozostawiony pusty, na przykład aria-live bez wartości, nie jest tutaj zgłaszany. Przeglądarki ignorują pustą wartość, więc atrybut zachowuje się tak, jakby nie istniał: pusty aria-live działa tak samo jak off. Jeśli rola elementu wymaga tego atrybutu, Brak wymaganego atrybutu ARIA zostanie zgłoszony jako brakujący.

Atrybuty odwołujące się do identyfikatorów elementów są testowane przez własne kontrole, takie jak Brak identyfikatora aria-controls, a atrybuty dowolnego tekstu, takie jak aria-label, akceptują każdy tekst.

Rozwiązywanie problemów

Wartość jest ustawiana przez framework

Biblioteki komponentów czasami nieprawidłowo serializują stany (na przykład renderując aria-expanded="null"). Wynik wskazuje element, ale poprawka zazwyczaj dotyczy sposobu konfiguracji komponentu lub aktualizacji biblioteki.