Naam, rol, waarde
Alle interactieve componenten moeten hun naam (wat het heet), rol (wat het is) en status (in welke toestand het is) blootstellen aan hulptechnologie. De basis van compatibiliteit met hulptechnologie.
Elke knop, link en selectievakje moet aan ondersteunende technologie aangeven wat het is, hoe het heet en wat de huidige status ervan is. Dit vormt de basis waarop al het andere rust.
WCAG 4.1.2 (Niveau A) vereist dat voor alle UI-componenten de naam en rol programmatisch bepaald kunnen worden, statussen en waarden programmatisch ingesteld kunnen worden, en melding van wijzigingen beschikbaar is voor hulptechnologie.
De berekening van de toegankelijke naam volgt een prioriteitsvolgorde: aria-labelledby → aria-label → gekoppeld label → tekstinhoud → title-attribuut. Het begrijpen van deze cascade is essentieel voor het debuggen.
Waarom dit belangrijk is
Dit is de basis van compatibiliteit met hulptechnologie. Als een interactief element zijn naam niet blootstelt (wat het heet), rol (wat het is) en status (in welke toestand het is), is het onzichtbaar of misleidend voor schermlezersgebruikers.
Hoe te detecteren
Open DevTools → tabblad Toegankelijkheid. Controleer voor elk interactief element: heeft het een toegankelijke naam? Is de rol correct (button, link, checkbox, etc.)? Is de status accuraat (expanded, checked, disabled)?
Hoe op te lossen
<!-- Name: what is it called? --> <button aria-label="Close dialog">✕</button> <!-- Role: what is it? --> <div role="switch" aria-checked="true">Dark mode</div> <!-- State: what condition is it in? --> <button aria-expanded="false" aria-controls="menu"> Menu </button> <ul id="menu" hidden> <li><a href="/about">About</a></li> </ul>