Aria-label en aria-labelledby

Laatst gewijzigd op 30/09/2025

In de accessibility tree heeft elke component een naam nodig. HTML-elementen vullen die impliciet in. Met aria-label en aria-labelledby kan je de naam van een component in de accessibility tree toevoegen of wijzigen

Impliciet via HTML

Bij HTML-elementen is er standaard altijd een manier om de component een naam te geven. Voorbeelden zijn:

de tekst tussen de open- en sluittag van een a- en button-element:
```
<a href="/contact">Neem contact op</a>
```
het alt-attribuut van het img-element:
```
<img src="logo.png" alt="AnySurfer" />
```

het label bij input- en select-elementen:

<label for="fname">Uw voornaam</label>
<input type="text" id="fname" />

Met ARIA

Met de ARIA-attributen aria-label en aria-labelledby kan je in de accessibility tree de naam van een component toevoegen of wijzigen.

aria-label krijgt als waarde een gewone tekst. Dit invoerveld heeft geen zichtbare naam die we als label kunnen gebruiken. Met aria-label kunnen we het invoerveld een toegankelijke naam geven in de accessibility tree:

<form name="search_website">
<input type="text" name="search" aria-label="Zoekterm">
<input type="submit" value="Zoeken">
</form>

Het aria-labelledby-attribuut krijgt als waarde de naam van het id van de component die de naam bevat. Zo kunnen we tabpanelen de naam geven van de tab die ernaar verwijst:

<a role="tab" id="tab1">Weekdagen</a>
<a role="tab" id="tab2">Zaterdag</a>
<a role="tab" id="tab3">Zon- en feestdagen</a>

<div id="tabpanel1" role="tabpanel" aria-labelledby="tab1">
Open van 9u tot 18u</div>
<div id="tabpanel2" role="tabpanel" aria-labelledby="tab2">
Open van 10u tot 17u</div>
<div id="tabpanel3" role="tabpanel" aria-labelledby="tab3">
Gesloten</div>

Aandachtspunten

Een aria-label(ledby)-attribuut werkt enkel op een component die een rol heeft. Gebruik ze niet op een span of div, want die component bestaat niet in de accessibility tree.
aria-label(ledby) overschrijft de naam van de component.
Hou er rekening mee dat ARIA-labels enkel bestaan binnen de accessibility tree.
Let op de dubbele "l" in labelledby
Vergeet de inhoud van ARIA-labels niet te vertalen.

Herhaal de rol niet in het label. Doe niet:

<button aria-label="Zoekknop">
<a href="facebook.com" aria-label="Link naar Facebook"></a>
<nav aria-label="hoofdnavigatie">

Maar wel:

<button aria-label="Zoeken">
<a href="facebook.com" aria-label="Facebook"></a>
<nav aria-label="hoofd"> <!-- of zonder aria-label -->

Voorrangsregels

Er is vastgelegd hoe een component een naam krijgt en wat de voorrangsregels zijn. Een ARIA-label heeft altijd voorrang.

<h2>Producten</h2>
<a href="/producten" aria-label="Lees meer over onze producten">
Lees meer
</a>

De zichtbare linktekst is "lees meer", maar de naam van de component in de accessibility tree is "Lees meer over onze producten".

Dit is een correcte toepassing, maar denk ook aan het succescriterium 2.5.3 Label in naam: de naam van de component in de accessibility tree mag de zichtbare tekst uitbreiden, maar niet vervangen.

<a href="/en" aria-label="English version">
EN
</a>

Bovenstaande code is een link naar de Engelse versie van een website: de linktekst "EN" is misschien niet voor iedereen even betekenisvol. Via het aria-label werd die linktekst in de accessibility tree vervangen door "English version". Dit lijkt een goed idee: screenreaders lezen nu "English version" als linktekst, maar op het scherm staat nog steeds EN:

De screenreadergebruiker weet niet dat hij een andere linktekst te horen krijgt dan wat er op het scherm staat. Dat kan verwarrend zijn voor iemand die meekijkt op het scherm.
Iemand die dicteersoftware gebruikt zoals dragon naturally speaking zal het spraakcommando "klik EN" geven want dat is wat hij op het scherm ziet. Dit commando zal niet werken, want voor Dragon is de linktekst "English version" geworden. De gebruiker van de dicteersoftware kan dat niet weten.

Nog een slecht voorbeeld van een overschrijvend ARIA-label:

<a class="external" aria-label="Externe link" 
href="https://www.anysurfer.be">
AnySurfer
</a>

Men heeft hier via aria-label een tekstalternatief willen geven aan het icoontje dat aangeeft dat de link naar AnySurfer in een aparte tab zal openen. Maar de techniek is niet juist want de naam van de link in de accessibility tree is nu "Externe link" en niet "AnySurfer" want het aria-label heeft de linktekst overschreven.

Meer lezen

Hoe wordt de accessible name berekend?
Niet alle HTML-elementen mogen een naam krijgen: als er bij een HTML-element “naming prohibited” staat, dan mag het geen aria-label hebben (behalve als het een andere rol heeft gekregen).

Reacties

Reageer als eerste