Eigenschap Relatie

`aria-label`

Biedt een toegankelijke naam als tekenreeks wanneer er geen zichtbare tekst beschikbaar is. Gebruik alleen wanneer er geen zichtbaar label op het scherm staat — als er zichtbare tekst aanwezig is, verdient aria-labelledby de voorkeur zodat de uitgesproken naam overeenkomt met wat de gebruiker ziet.

Wanneer te gebruiken

Wanneer een element geen zichtbare tekst heeft — knoppen met alleen een pictogram, zoekvelden met alleen een vergrootglas, sluit (×)-knoppen, pictogramkoppelingen naar sociale media. De tekenreeks in aria-label wordt de toegankelijke naam van het element, en schermlezers kondigen deze aan in plaats van eventuele interne tekst.

Het native HTML-equivalent is het <label>-element voor formulierinvoervelden, of zichtbare knoptekst. Gebruik aria-label alleen wanneer geen van beide mogelijk is.

Gedrag

Accepteert één tekenreeks. Wat in aria-label staat, overschrijft eventuele zichtbare tekst in het element — de toegankelijke naam is wat gebruikers van hulptechnologie horen, maar die is onzichtbaar voor ziende gebruikers. Die asymmetrie is de bron van de meeste fouten met dit attribuut.

De tekenreeks wordt niet automatisch vertaald. Als de website meerdere talen ondersteunt, moet de waarde van aria-label net als elke andere UI-tekenreeks worden gelokaliseerd. Schermlezers behandelen de waarde als platte tekst — geen HTML, geen regeleinden, geen opmaak.

Als het element zichtbare tekst heeft, gebruik dan bij voorkeur aria-labelledby die naar die tekst verwijst, zodat het zichtbare label en de toegankelijke naam gesynchroniseerd blijven.

Veelvoorkomende fouten

aria-label="Klik hier" op een knop die al “Bestelling verzenden” zegt — de zichtbare tekst is nu verborgen voor hulptechnologie en de gebruiker hoort iets verkeerds.
WCAG 2.5.3 Label in Name schenden: aria-label="Verzenden" op een knop waarvan de zichtbare tekst “Bestelling sturen” zegt, betekent dat een spraakbedieningsgebruiker niet “klik Bestelling sturen” kan zeggen om het te bedienen.
aria-label toevoegen aan een niet-interactief element zoals een <div> of <span> — de meeste browsers negeren het omdat het element geen role heeft die een naam ondersteunt.
De waarde niet vertalen wanneer de rest van de pagina in een andere taal is.
aria-label gebruiken in plaats van een echte <label> op een formulierveld, waardoor de affordance om op het label te klikken om het veld te focussen verloren gaat.
Instructies in aria-label stoppen in plaats van in aria-describedby. De naam moet kort zijn; helptekst hoort in de beschrijving.

Voorbeeld

<!-- Knop met alleen pictogram: geen zichtbare tekst, aria-label is vereist -->
<button type="button" aria-label="Dialoogvenster sluiten">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

<!-- Zichtbare tekst + pictogram: gebruik hier GEEN aria-label -->
<button type="button">
  <svg aria-hidden="true" focusable="false">…</svg>
  Dialoogvenster sluiten
</button>