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.
Every button, link, and checkbox must tell assistive tech what it is, what it's called, and its current state. The bedrock everything else rests on.
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>