Manglende ARIA-label-id'er
Silktide tjekker elementer, der får deres fra andre elementer via id, og rapporterer referencer til id'er, der ikke findes på siden. En brudt reference efterlader elementet uden det navn, det skulle have haft.
Attributten aria-labelledby giver et
element et navn ved at pege på id'et for elementet, der indeholder dets tekstmærkat – en
overskrift, der navngiver en dialogboks, eller en tekstmærkat, der navngiver et kontrolelement:
<!-- Problem: Referencen angiver "dialog-label", men overskriftens id er "dialog-labell" -->
<h2 id="dialog-labell">Vigtig besked!</h2>
<div role="dialog" aria-labelledby="dialog-label">
Hvorfor dette er vigtigt
Det tilgængelige navn er det, som en
annoncerer, når en besøgende
når et element. Når en aria-labelledby-reference peger på ingenting,
kan elementet blive annonceret helt uden navn – en unavngivet dialogboks, en
unavngivet knap – og den besøgende skal gætte dens formål. Disse fejl er
usynlige: Siden ser identisk ud, og selv omhyggelig brugertest fanger sjældent
et navn, der ikke blev tilknyttet. Id'er omdøbes, og indhold
omstruktureres, så referencer forældes med tiden.
Sådan løser du det
- Find det element, der skulle levere navnet, og sørg for, at
aria-labelledby-værdien matcher detsidnøjagtigt (id'er skelner mellem store og små bogstaver):
<!-- Løst: Referencen matcher overskriftens id -->
<h2 id="dialog-label">Vigtig besked!</h2>
<div role="dialog" aria-labelledby="dialog-label">
- Hvis mærkatelementet blev fjernet, skal du enten gendanne det eller skifte til en
aria-label-attribut, der indeholder navnet som tekst. - Når ét element navngives af flere andre, skal du angive hvert id adskilt af mellemrum og tjekke dem alle.
Sådan tester Silktide dette
- Find hvert element med en
aria-labelledby-attribut på hver side. - Opdel attributværdien i individuelle id'er.
- Rapportér hvert refererede id, der ikke findes nogen steder på siden.