Brak identyfikatora aria-controls
Silktide sprawdza każdy atrybut aria-controls na Twoich stronach i weryfikuje, czy wymienione w nim identyfikatory elementów rzeczywiście istnieją. Ten atrybut określa, na którą część strony działa kontrolka, na przykład panel wyświetlany przez kartę lub menu otwierane przez przycisk.
<!-- Problem: żaden element na stronie nie ma id="filter-panel" -->
<button aria-expanded="false" aria-controls="filter-panel">Filtry</button>
Dlaczego to ważne
Atrybut aria-controls pozwala
powiązać
kontrolkę z treścią, na którą wpływa — niektóre
oferują skrót umożliwiający przejście
bezpośrednio do kontrolowanego elementu. Gdy odwołanie jest nieprawidłowe,
to powiązanie po prostu znika. Nieprawidłowe odwołania zwykle oznaczają, że identyfikator
został zmieniony lub komponent usunięty, więc są również wczesnym sygnałem, że
sam widżet może już nie działać zgodnie z zamierzeniem.
Jak to naprawić
- Dopilnuj, aby każdy identyfikator wymieniony w
aria-controlsodpowiadał atrybutowiidrzeczywistego elementu na tej samej stronie. Atrybut może zawierać kilka identyfikatorów oddzielonych spacjami; sprawdź każdy z nich. - Jeśli kontrolowany element jest dodawany dynamicznie, wyrenderuj go od początku jako ukryty
albo ustaw
aria-controlsdopiero, gdy element istnieje. - Jeśli kontrolowany element został trwale usunięty, usuń atrybut.
Jak Silktide to testuje
- Znajduje każdy element na stronie z atrybutem
aria-controls. - Sprawdza każdy identyfikator, do którego się on odwołuje, względem identyfikatorów elementów obecnych na stronie.
- Zgłasza każde odwołanie, które nie pasuje do żadnego elementu.
Rozwiązywanie problemów
Element docelowy jest tworzony później przez skrypt
Silktide testuje stronę podczas jej ładowania. Jeśli panel, do którego prowadzi odwołanie, pojawia się dopiero po interakcji użytkownika, do tego czasu odwołanie jest nieprawidłowe — lepiej pozostawić element docelowy na stronie (ukryty), aby odwołanie zawsze można było rozwiązać.