Brakujące identyfikatory etykiet ARIA
Silktide kontroluje elementy, które pobierają swoją z innych elementów za pomocą identyfikatora, i zgłasza odwołania do identyfikatorów, które nie istnieją na stronie. Uszkodzone odwołanie pozostawia element bez nazwy, którą miał otrzymać.
Atrybut aria-labelledby nadaje
elementowi nazwę, wskazując na id elementu zawierającego jego etykietę —
nagłówek nazywający okno dialogowe lub podpis nazywający kontrolkę:
<!-- Problem: odwołanie wskazuje „dialog-label”, ale id nagłówka to „dialog-labell” -->
<h2 id="dialog-labell">Ważny komunikat!</h2>
<div role="dialog" aria-labelledby="dialog-label">
Dlaczego to jest ważne
Nazwa dostępna to informacja, którą
ogłasza, gdy odwiedzający
dociera do elementu. Gdy odwołanie aria-labelledby nie wskazuje na nic,
element może zostać ogłoszony bez żadnej nazwy — nienazwane okno dialogowe,
nienazwany przycisk — a odwiedzający musi odgadnąć jego przeznaczenie. Te błędy są
niewidoczne: strona wygląda identycznie, a nawet staranne testy z użytkownikami rzadko
wychwytują nazwę, której przypisanie po cichu się nie powiodło. Identyfikatory są zmieniane, a treść
restrukturyzowana, więc odwołania z czasem stają się nieaktualne.
Jak to naprawić
- Znajdź element, który miał dostarczać nazwę, i spraw, aby wartość
aria-labelledbydokładnie odpowiadała jegoid(w identyfikatorach rozróżniana jest wielkość liter):
<!-- Naprawiono: odwołanie odpowiada id nagłówka -->
<h2 id="dialog-label">Ważny komunikat!</h2>
<div role="dialog" aria-labelledby="dialog-label">
- Jeśli element etykietujący został usunięty, przywróć go albo użyj atrybutu
aria-labelzawierającego nazwę jako tekst. - Gdy jeden element jest nazywany przez kilka innych elementów, podaj wszystkie identyfikatory oddzielone spacjami i sprawdź każdy z nich.
Jak Silktide to testuje
- Znajduje każdy element z atrybutem
aria-labelledbyna każdej stronie. - Dzieli wartość atrybutu na poszczególne identyfikatory.
- Zgłasza każdy wskazany identyfikator, który nie istnieje nigdzie na stronie.