Niedozwolony atrybut ARIA

Silktide sprawdza, czy każdy atrybut ARIA na Twoich stronach jest faktycznie obsługiwany przez rolę elementu. Atrybuty, których rola nie obsługuje, oraz atrybuty, które w ogóle nie są częścią standardu ARIA, są ignorowane przez przeglądarki — zamierzone przez autora działanie nigdy nie następuje.

<!-- Problem: aria-checked nic nie oznacza w przypadku przycisku -->
<button aria-checked="true">Bold</button>

<!-- Poprawka: użyj roli obsługującej wymagany stan -->
<button role="switch" aria-checked="true">Bold</button>

Dlaczego to jest ważne

Każda rola obsługuje określony zestaw stanów i właściwości, a przeglądarki odrzucają wszystko poza tym zestawem. Strona wygląda wtedy poprawnie podczas przeglądu kodu, ale użytkownicy nie otrzymują niczego: przełącznika, którego stan nigdy nie jest ogłaszany, lub opisu, który nigdy nie zostaje odczytany. Ta kategoria wykrywa również błędnie zapisane atrybuty, takie jak aria-lable — to najbardziej szkodliwy przypadek, ponieważ autor uważa, że etykieta istnieje, a użytkownik jej nie otrzymuje.

Jak to naprawić

Popraw błędnie zapisane nazwy atrybutów (aria-lable powinno być aria-label, a aria-labeledby powinno być aria-labelledby).
Jeśli atrybut jest poprawny, ale nieobsługiwany, zmień rolę elementu na rolę, która go obsługuje — lub zastanów się, czy natywny element nie zapewnia już tego zachowania.
Jeśli atrybut nie robi nic użytecznego, usuń go.

Jak Silktide to testuje

Znajdź każdy element na stronie zawierający co najmniej jeden atrybut aria-.
Określ zestaw atrybutów ARIA prawidłowych dla tego elementu: atrybuty globalne, które działają wszędzie (takie jak aria-label i aria-hidden), oraz atrybuty obsługiwane przez rolę elementu. Gdy atrybut role zawiera kilka ról, rolą elementu jest pierwsza z nich zdefiniowana przez ARIA 1.2, tak jak w przeglądarkach. Pola formularzy, które nie mają roli ARIA, takie jak pola haseł, dat i plików, przyjmują atrybuty dozwolone dla nich przez ARIA in HTML. Element <input> bez atrybutu type lub z typem nierozpoznawanym przez przeglądarki jest traktowany jako pole tekstowe. Komórka nagłówka tabeli (<th>) jest nagłówkiem kolumny lub nagłówkiem wiersza: decyduje o tym jej atrybut scope albo, jeśli go nie ma, to czy jej wiersz zawiera również komórki danych. Komórka danych (<td>) jest komórką lub komórką siatki wewnątrz siatki.
Zgłoś nazwy atrybutów, które nie są częścią ARIA 1.2 — zazwyczaj są to literówki.
Zgłoś rozpoznane atrybuty użyte w elemencie, którego rola ich nie obsługuje, lub które wymagają roli, której element nie ma.

Przestarzałe atrybuty są zgłaszane osobno przez Przestarzały atrybut ARIA, a wartości atrybutów są sprawdzane przez Nieprawidłowa wartość atrybutu ARIA.

Rozwiązywanie problemów

Atrybut działa w moich testach

Niektóre połączenia czytników ekranu i przeglądarek tolerują niestandardowe kombinacje, które inne odrzucają. Zgodność ze standardem sprawia, że zachowanie jest przewidywalne w technologii wspomagającej, której nie możesz przetestować.