Toegankelijke naam
Elk interactief element heeft een berekende toegankelijke naam nodig. Bronnen (in prioriteit): aria-labelledby → aria-label → <label> → tekstinhoud → title. Lege naam = onzichtbaar voor hulptechnologie.
The name assistive tech announces for a control. If it's blank, the button is effectively unlabeled and unusable by screen readers.
De berekening van de toegankelijke naam is gedefinieerd in de WAI-ARIA-specificatie en volgt een strikte prioriteitsvolgorde. Het begrijpen van deze cascade is essentieel voor het debuggen waarom een element de verkeerde naam of helemaal geen naam heeft.
Veelvoorkomende fouten: icoon-only knoppen zonder aria-label, afbeeldingen als links zonder alt-tekst, aangepaste componenten die labels niet doorsturen, en aria-label dat niet overeenkomt met de zichtbare tekst (schending van 2.5.3).
Waarom dit belangrijk is
Elk interactief element moet een berekende toegankelijke naam hebben — zo identificeren schermlezers wat iets is. Een icoonknop zonder naam wordt aangekondigd als alleen "knop" — volledig zinloos. Dit ligt ten grondslag aan vrijwel elke andere toegankelijkheidsvereiste.
Hoe te detecteren
Open DevTools → tabblad Toegankelijkheid en controleer de berekende eigenschap "Naam" voor elk interactief element. Lege namen zijn kritieke fouten. Controleer ook dat namen overeenkomen met zichtbare tekst (WCAG 2.5.3 Label in Name).
Hoe op te lossen
<!-- Text content provides the name --> <button>Save</button> <!-- name: "Save" --> <!-- aria-label for icon-only buttons --> <button aria-label="Close"> <svg>...</svg> </button> <!-- aria-labelledby for complex names --> <h2 id="section-title">Shipping</h2> <form aria-labelledby="section-title">...</form> <!-- Name computation priority: --> <!-- 1. aria-labelledby --> <!-- 2. aria-label --> <!-- 3. <label> (for inputs) --> <!-- 4. Text content --> <!-- 5. title attribute (last resort) -->