De toegankelijke naam – Toegankelijkheid

Stel je voor: iemand bezoekt jouw website met een schermlezer en hoort alleen maar “Knop, link, afbeelding, link”. Ze hebben geen idee wat deze elementen doen of waar ze voor dienen. Best frustrerend, toch?

Elk element dat betekenis heeft, of waar gebruikers mee kunnen interacteren, heeft een toegankelijke naam nodig. Zo kan een schermlezer duidelijk maken wat het element doet. In dit artikel leg ik uit hoe een browsers deze naam berekenen en waar je op moet letten.

Toegankelijke naam

Deze elementen hebben een toegankelijke naam nodig:

Interactieve elementen
- Links
- Knoppen
- Formulierelementen (invoervelden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars, schuifbalken, enz.)
Afbeeldingen (tenzij ze decoratief zijn)
Media (<video>, <audio>)
Structuurelementen
- Landmarks (<main>, <nav>, <aside>)
Speciale gevallen
- Ingesloten content (<iframe>)
- Elementen met specifieke ARIA-rollen

Hoe browsers de naam berekenen

Browsers bepalen de toegankelijke naam via een algoritme met een duidelijke prioriteitsvolgorde. Ze controleren altijd in deze volgorde en stoppen bij de eerste bruikbare naam:

1. `aria-labelledby`

Het aria-labelledby-attribuut verwijst naar het id van een ander element. De browser gebruikt dan de tekst van dat element.

Hiermee kun je ook meerdere teksten combineren. De browser voegt tekst van meerdere id’s samen met een spatie er tussen. Als een id niet bestaat, dan wordt het genegeerd.

<span id="actie">
  Download
</span>
<span id="type">
  PDF
</span>
<span id="grootte">
  2.4 MB
</span>

<button type="button" aria-labelledby="actie type grootte">
  Download
</button>
<!-- Schermlezer zegt: "Download PDF 2.4 MB" -->

2. `aria-label`

Het aria-label-attribuut geeft elementen direct een naam.

<button type="button" aria-label="Menu openen">
  ☰
</button>
<!-- Schermlezer zegt: "Menu openen" -->

Let op: Wees voorzichtig met het gebruik van aria-label. Mensen die spraakbediening gebruiken kunnen problemen krijgen als de toegankelijke naam verschilt van de zichtbare tekst.

Als er tekst op een bedieningselement (zoals een link, knop of formulierelement) zichtbaar is op het scherm, zorg dan dat alle zichtbare tekst is opgenomen in de toegankelijke naam.

3. Inhoud van het element

Als er geen aria-labelledby of aria-label is, gebruikt de browser de standaard HTML-elementen en -attributen. Deze elementen zijn standaard al toegankelijk. Dit verschilt per elementtype:

Voor links en knoppen: de tekstinhoud (inclusief tekst en tekstalternatieven in onderliggende elementen)
Voor formulierelementen: het gekoppelde <label>-element
Voor afbeeldingen: het alt-attribuut

<a href="https://wcag.nl/">
  Naar WCAG.nl
</a>

<button type="button">
  Opslaan
</button>

<input type="submit" value="Versturen">

<label for="naam">
  Voornaam
</label>
<input type="text" id="naam">

<img src="logo.png" alt="Bedrijfsnaam">

Voor links en knoppen neemt de browser alle tekstinhoud mee, inclusief tekst in onderliggende elementen. Een knop met een afbeelding en een tekst krijgt beide als naam.

4. `title`

Het title-attribuut wordt alleen gebruikt als niks anders werkt. Dit is niet ideaal omdat niet alle schermlezers dit consistent ondersteunen. Gebruik dit alleen als laatste redmiddel.

Implementatie

Dit zijn de specifieke stappen voor veelvoorkomende elementen:

Links

Voor <a> met href:

aria-labelledby
aria-label
Tekst in het <a>-element
title

Knoppen

Voor <button>:

aria-labelledby
aria-label
Tekst in het <button>-element
title

Voor <input type="button">, <input type="submit"> en <input type="reset">:

aria-labelledby
aria-label
value
Voor input type="submit": Als stap 1 tot en met 3 geen naam opleveren, dan is de toegankelijke naam een versie van “Versturen”.
Voor input type="reset": Als stap 1 tot en met 3 geen naam opleveren, dan is de toegankelijke naam een versie van “Stel opnieuw in”.
title

Formulierelementen

Voor <input type="text">, <input type="password">, <input type="search">, <input type="tel">, <input type="email">, <input type="url"> en <textarea>:

aria-labelledby
aria-label
<label>
title
placeholder

Voor <input type="range">, <input type="date">, <input type="time">, <input type="month">, <input type="week">, <input type="file">, <input type="radio">, <input type="checkbox">, <input type="color">, <input type="number"> en <select>:

aria-labelledby
aria-label
<label>
title

Afbeeldingen

Voor <img>:

aria-labelledby
aria-label
alt
title

Voor <figure>:

aria-labelledby
aria-label
Tekst in het <figcaption>-element
title

Voor <svg>:

aria-labelledby
aria-label
Tekst in het <title>-element in de <svg>
title

Media

Voor <video>:

aria-labelledby
aria-label
title

Voor <audio>:

aria-labelledby
aria-label
title

Landmarks

Voor <header> (op body niveau), <footer> (op body niveau), <nav>, <main>, <aside>, <section>, <form>:

aria-labelledby
aria-label
Als stap 1 en 2 geen naam opleveren, dan is de toegankelijke naam een versie van “Banner”, “Navigatie”, “Zoeken”, enz.

Maar onthoud de eerste regel van ARIA: Gebruik geen ARIA als je native HTML-elementen kunt gebruiken.

Hoe test je dit?

Theorie is fijn, maar hoe test je dit in de praktijk?

Met browser tools

Chrome en Firefox hebben een eigen accessibility tree in hun development tools. Deze geeft gedetailleerde informatie over toegankelijkheid van bijna alle HTML-elementen. Hier kun je de naam van de elementen achterhalen. Open hiervoor de Inspector (Ontwikkelaarstools).

In Firefox: Ga naar het tabblad Toegankelijkheid
In Chrome: Ga naar het tabblad Elementen → (Overschakelen naar de structuurweergave voor toegankelijkheid)

Met een schermlezer

Schakel de schermlezer in
Navigeer door alle content
Luister naar de aankondigingen
Controleer deze punten:
- Zou ik begrijpen wat dit element doet als ik het alleen hoorde?
- Is de naam beschrijvend?
- Komt het overeen met wat visueel zichtbaar is?

Als je op alle vragen “ja” kunt zeggen, dan zit je waarschijnlijk goed.

Schermlezer

Een schermlezer is een hulptechnologie die tekst op alternatieve manier presenteert, zoals voorleessoftware of een brailleleesregel.

Test zelf je website eens met voorleessoftware, zoals NVDA voor Windows of VoiceOver voor macOS. Lees door je website en luister naar de aankondigingen.

Lees meer over voorleessoftware gebruiken

Met automatische tools

Automatische tools kunnen (grotendeels) controleren of een element wel of niet een naam heeft. De inhoud en betekenis van de naam kunnen ze niet beoordelen.

axe DevTools: Browser-extensie die ontbrekende namen kan vinden
WAVE: Markeert toegankelijkheidsproblemen inclusief ontbrekende namen
Lighthouse: Google’s ingebouwde accessibility-check in Chrome

Om te onthouden

Je ziet een toegankelijke naam misschien niet direct, maar het maakt hét verschil tussen een website die werkt voor iedereen en een website die mensen juist niet kunnen gebruiken. Met het algoritme in je achterhoofd kun je bewuste keuzes maken die je site echt toegankelijk maken.

Start klein: Controleer eerst je links en knoppen. Hebben ze duidelijke namen? Begrijp je ze zonder context? Dan zit je al goed op weg.

Uitdaging: Wat is de toegankelijke naam?

Je bent nu helemaal op de hoogte van toegankelijke namen en hun prioriteit. Tijd voor een laatste check: wat denk je dat een schermlezer uitspreekt bij de volgende knop?

<p id="label-voor-button">
  Knop om iets te downloaden
</p>
<button type="button" aria-label="Simpele knop" aria-labelledby="label-voor-button">
  Download!
</button>

Oplossing

De schermlezer kondigt hier aan: “Knop om iets te downloaden”

Dit komt omdat het aria-labelledby-attribuut de hoogste prioriteit heeft in de berekening van de toegankelijke naam. De andere attributen en de inhoud van de knop worden dan genegeerd.

Wist je het antwoord? Dan zit je helemaal goed!

Had je het nog niet goed? Geen stress! Onthoud de volgorde: aria-labelledby → aria-label → inhoud van het element → title.

Bronnen

Accessible Name and Description Computation 1.2 (Engelstalig)