Brakujący identyfikator aria-activedescendant

Silktide sprawdza każdy atrybut aria-activedescendant na Twoich stronach i weryfikuje, czy identyfikator elementu, na który wskazuje, rzeczywiście istnieje. Ten atrybut informuje , który element wewnątrz widżetu, takiego jak lista rozwijana, jest obecnie wyróżniony.

<!-- Problem: żaden element na stronie nie ma id="opt-2" -->
<ul role="listbox" aria-activedescendant="opt-2">
  <li role="option" id="opt-1">Pierwsza opcja</li>
</ul>

Dlaczego to jest ważne

Widżety, takie jak niestandardowe listy rozwijane, pola kombi i siatki, zachowują na kontenerze i używają atrybutu aria-activedescendant, aby wskazać, który element wewnątrz jest aktywny. Gdy odwołanie wskazuje na identyfikator, który nie istnieje, nie słyszy niczego podczas przechodzenia między opcjami — widżet wydaje się nie mieć żadnego zaznaczenia, przez co jest nieużywalny bez wzroku.

Jak to naprawić

Ustaw w atrybucie odwołanie do id aktualnie aktywnego elementu i aktualizuj je, gdy użytkownik porusza się po widżecie.
Jeśli widżet ponownie renderuje swoje elementy, upewnij się, że nowe elementy zachowują stabilne identyfikatory, lub zaktualizuj aria-activedescendant w tym samym kroku.
Usuń atrybut, jeśli widżet już nie istnieje lub bezpośrednio zarządza fokusem.

Jak Silktide to testuje

Znajdź każdy element na stronie z atrybutem aria-activedescendant.
Porównaj identyfikator, do którego się odwołuje, z identyfikatorami elementów obecnych na stronie.
Zgłoś każde odwołanie, które nie odpowiada żadnemu elementowi.

Rozwiązywanie problemów

Element docelowy jest tworzony później przez skrypt

Silktide testuje stronę podczas jej ładowania. Jeśli element, do którego prowadzi odwołanie, istnieje dopiero po interakcji użytkownika, odwołanie jest w międzyczasie nadal nieprawidłowe — ustaw aria-activedescendant dopiero wtedy, gdy jego element docelowy istnieje.