Manglende ID-er for ARIA-etiketter
Silktide kontrollerer elementer som henter sitt fra andre elementer ved hjelp av ID, og rapporterer referanser til ID-er som ikke finnes på siden. En ødelagt referanse gjør at elementet ikke får navnet det skulle ha.
ARIA-attributtet aria-labelledby navngir et element ved å peke på id-en til elementet som inneholder etiketten – for eksempel en overskrift som navngir en dialogboks eller en bildetekst som navngir en kontroll:
<!-- Problem: referansen sier "dialog-label", men overskriftens id er "dialog-labell" -->
<h2 id="dialog-labell">Viktig melding!</h2>
<div role="dialog" aria-labelledby="dialog-label">
Hvorfor dette er viktig
Det tilgjengelige navnet er det en leser opp når en besøkende kommer til et element. Når en aria-labelledby-referanse ikke peker på noe, kan elementet bli lest opp helt uten navn – en navnløs dialogboks eller en navnløs knapp – og den besøkende må gjette hva det brukes til. Disse feilene er usynlige: Siden ser identisk ut, og selv grundig brukertesting fanger sjelden opp et navn som i stillhet ikke ble knyttet til elementet. ID-er får nye navn og innhold omstruktureres, så referanser blir ugyldige over tid.
Slik løser du det
- Finn elementet som skulle gi navnet, og sørg for at verdien til
aria-labelledbysamsvarer nøyaktig med elementetsid(ID-er skiller mellom store og små bokstaver):
<!-- Løst: referansen samsvarer med overskriftens id -->
<h2 id="dialog-label">Viktig melding!</h2>
<div role="dialog" aria-labelledby="dialog-label">
- Hvis elementet som ga etiketten, er fjernet, kan du enten gjenopprette det eller bytte til et
aria-label-attributt som inneholder navnet som tekst. - Når ett element navngis av flere andre elementer, skal du oppgi alle ID-ene atskilt med mellomrom og kontrollere hver enkelt.
Slik tester Silktide dette
- Finn alle elementer med et
aria-labelledby-attributt på hver side. - Del attributtverdien opp i individuelle ID-er.
- Rapporter hver refererte ID som ikke finnes noe sted på siden.