De toegankelijke naam

Categorieën: Toegankelijkheid
Geplaatst op

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

Toegankelijke namen zijn nodig voor voor:

  • Interactieve elementen
    • Links, knoppen, formulierelementen
    • Menu’s, tabbladen, accordeons
  • Structuur elementen
    • Landmarks (main, nav, aside)
    • Tabellen, lijsten
    • Secties, artikelen
  • Niet-tekstuele content
    • Afbeeldingen
    • Filmpjes, geluidsfragmenten
  • Dynamische content
    • Ingesloten content (<iframe>)
    • Live regions

Hoe browsers de naam berekenen

Browsers bepalen de toegankelijke naam via een logisch 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 eventueel 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 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 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. Native HTML

Dit zijn de standaard HTML-elementen en attributen die al ingebouwde toegankelijkheidsfunctionaliteit hebben, zoals het <label>-element voor formulierelementen en het alt-attribuut voor afbeeldingen.

<label for="email">
  Je e-mailadres
</label>
<input type="email" id="email">

4. Inhoud van het element

Voor links en knoppen gebruikt de browser de tekstinhoud als toegankelijke naam.

<button>
  Versturen
</button>

<a href="/contact">
  Contact
</a>

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

5. 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.

Praktische implementatie

Dit zijn de specifieke stappen voor veelvoorkomende elementen:

Links

Voor <a>:

  1. aria-labelledby
  2. aria-label
  3. Tekst in het <a>-element
  4. title
Knoppen

Voor <button>:

  1. aria-labelledby
  2. aria-label
  3. Tekst in het <button>-element
  4. title
Formulierelementen

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

  1. aria-labelledby
  2. aria-label
  3. <label>
  4. placeholder
  5. title

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" en select:

  1. aria-labelledby
  2. aria-label
  3. <label>
  4. title

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

  1. aria-labelledby
  2. aria-label
  3. value
  4. Voor input type=submit: Als stap 1 tot en met 3 geen naam opleveren, dan is de toegankelijke naam een versie van “Versturen”.
  5. 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”.
  6. title
Afbeeldingen

Voor <img>:

  1. aria-labelledby
  2. aria-label
  3. alt
  4. title

Voor <figure>:

  1. aria-labelledby
  2. aria-label
  3. Tekst in het <figcaption>-element
  4. title
Landmarks

Voor banner, navigation, search, main, complementary, contentinfo:

  1. aria-labelledby
  2. aria-label
  3. 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 een schermlezer

  1. Schakel de schermlezer in
  2. Navigeer door alle content
  3. Luister naar de aankondigingen
  4. 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 browser tools

Chrome en Firefox hebben een eigen accessibility tree in hun developement 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
Schermafbeelding van de accessibility tree in Firefox
De accessibility tree in Firefox

Met automatische tools

Automatische tools kunnen controleren of een element wel of niet een naam heeft. De betekenis van de naam kunnen ze niet beoordelen.

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

Lees het artikel over hulpmiddelen bij het toetsen

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 aria-label="Simpele knop" aria-labelledby="label-voor-button">
  Download!
</button>
Oplossing

De schermlezer zegt: “De 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 → native HTML → inhoud van het element → title.

Zo zie je maar, de prioriteit van toegankelijke namen is cruciaal voor een heldere gebruikerservaring.

Bronnen