Ontbrekende ARIA-label-ID's
Silktide controleert elementen die hun ontlenen aan andere elementen via een ID, en rapporteert verwijzingen naar ID's die niet op de pagina bestaan. Een verbroken verwijzing laat het element achter zonder de naam die het had moeten hebben.
Het -attribuut aria-labelledby benoemt een
element door te verwijzen naar de id van het element dat het label bevat - een
kop die een dialoogvenster benoemt, of een bijschrift dat een besturingselement benoemt:
<!-- Probleem: de verwijzing zegt "dialog-label", maar de id van de kop is "dialog-labell" -->
<h2 id="dialog-labell">Belangrijk bericht!</h2>
<div role="dialog" aria-labelledby="dialog-label">
Waarom dit belangrijk is
De toegankelijke naam is wat een
aankondigt wanneer een bezoeker
een element bereikt. Wanneer een verwijzing in aria-labelledby naar niets verwijst,
kan het element zonder naam worden aangekondigd - een dialoogvenster zonder naam, een
knop zonder naam - en moet de bezoeker het doel ervan raden. Deze fouten zijn onzichtbaar:
de pagina ziet er identiek uit en zelfs zorgvuldig gebruikersonderzoek merkt zelden dat een naam
stilletjes niet is gekoppeld. ID's worden hernoemd en inhoud wordt opnieuw gestructureerd, waardoor
verwijzingen na verloop van tijd verouderen.
Zo lost u het op
- Zoek het element dat de naam had moeten leveren en zorg dat de
waarde van
aria-labelledbyexact overeenkomt met deidervan (ID's zijn hoofdlettergevoelig):
<!-- Opgelost: de verwijzing komt overeen met de id van de kop -->
<h2 id="dialog-label">Belangrijk bericht!</h2>
<div role="dialog" aria-labelledby="dialog-label">
- Als het element dat het label leverde is verwijderd, herstel het dan of schakel over naar een
aria-label-attribuut met de naam als tekst. - Wanneer één element door meerdere andere elementen wordt benoemd, vermeld dan elke ID, gescheiden door spaties, en controleer ze allemaal.
Zo test Silktide dit
- Zoek op elke pagina elk element met een attribuut
aria-labelledby. - Splits de waarde van het attribuut op in afzonderlijke ID's.
- Rapporteer elke ID waarnaar wordt verwezen en die nergens op de pagina bestaat.