Ontbrekende aria-details-ID
Silktide controleert elk aria-details-attribuut op je pagina's en verifieert of de element-ID waarnaar het verwijst daadwerkelijk bestaat. Dit attribuut koppelt een element aan een uitgebreidere uitleg elders op de pagina, zoals een grafiek die gekoppeld is aan de onderliggende gegevenstabel.
<!-- Probleem: geen enkel element op de pagina heeft id="sales-table" -->
<img src="chart.png" alt="Verkoop per kwartaal" aria-details="sales-table">
Waarom dit belangrijk is
Het -attribuut aria-details belooft gebruikers van
een uitgebreidere beschrijving waarnaar ze kunnen navigeren - de volledige gegevens achter een grafiek, of de termen achter een samenvatting. Wanneer de verwijzing niet klopt, kondigt een
aan dat er details bestaan, maar kan deze de gebruiker nergens naartoe brengen. Dat is verwarrender dan helemaal geen details aanbieden.
Zo los je het op
- Laat het attribuut verwijzen naar de
idvan een echt element op dezelfde pagina, bij voorkeur een element dat zichtbaar is, zodat elke gebruiker het kan bereiken. - Als de gedetailleerde inhoud is verwijderd, verwijder dan ook het
aria-details-attribuut. - Gebruik voor een korte tekstbeschrijving in plaats van uitgebreide inhoud eventueel
aria-describedby, dat de tekst rechtstreeks voorleest.
Zo test Silktide dit
- Zoek elk element op de pagina met een
aria-details-attribuut. - Controleer de ID waarnaar het verwijst aan de hand van de element-ID's die op de pagina aanwezig zijn.
- Rapporteer elke verwijzing die met geen enkel element overeenkomt.
Problemen oplossen
Deze controle rapporteert niets, hoewel ik bevindingen verwacht
ARIA-tests kunnen per website worden uitgeschakeld. Controleer de geavanceerde instellingen voor de website.