Ontbrekende ARIA-beschrijvings-ID's
Silktide controleert elementen die extra beschrijvende tekst aan zichzelf koppelen door naar andere elementen te verwijzen via hun ID, en meldt verwijzingen naar ID's die niet op de pagina bestaan. Een verbroken verwijzing laat de beschrijving stilletjes weg.
Het -attribuut aria-describedby koppelt een
element aan aanvullende tekst elders op de pagina - hulptekst onder een
formulierveld of een uitleg van een besturingselement:
<!-- Probleem: de verwijzing zegt "email-help", maar de id van de alinea is "email-helpp" -->
<input type="email" aria-describedby="email-help">
<p id="email-helpp">Voer je zakelijke e-mailadres in</p>
Waarom dit belangrijk is
Beschrijvingen bevatten de aanwijzingen die voorkomen dat mensen fouten maken - vereisten voor de indeling, waarschuwingen en uitleg over gevolgen. Een leest de beschrijving na de naam van een element, maar alleen als de verwijzing wordt gevonden. Als de verwijzing naar niets leidt, krijgt de bezoeker het veld zonder de bijbehorende instructies en kan die niet weten dat er iets ontbreekt. Bezoekers die kunnen zien, zien de hulptekst nog steeds naast het veld staan, waardoor de fout elke visuele controle doorstaat - precies daarom zijn automatische controles hier belangrijk.
Zo los je het op
- Zoek het element met de beschrijvende tekst en zorg dat de waarde van
aria-describedbyexact overeenkomt met deidervan (ID's zijn hoofdlettergevoelig):
<!-- Opgelost: de verwijzing komt overeen met de id van de alinea -->
<input type="email" aria-describedby="email-help">
<p id="email-help">Voer je zakelijke e-mailadres in</p>
- Als het beschrijvende element is verwijderd, herstel je het of verwijder je
het verouderde
aria-describedby-attribuut. - Als één element door meerdere andere elementen wordt beschreven, vermeld je elke ID, gescheiden door spaties, en controleer je elke ID.
Zo test Silktide dit
- Zoek op elke pagina elk element met een
aria-describedby-attribuut. - Splits de attribuutwaarde op in afzonderlijke ID's.
- Meld elke ID waarnaar wordt verwezen maar die nergens op de pagina bestaat.