De toegankelijke naam

Categorieën: Toegankelijkheid
Geplaatst op

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

Bij elk element dat betekenis heeft, of waar gebruikers mee kunnen interacteren, heeft een toegankelijke naam nodig. Een schermlezer kan hiermee duidelijk maken wat het element doet. In dit artikel leg ik je uit hoe een browser deze naam berekent en waar je op moet letten.

Toegankelijke naam

Toegankelijke naam is van toepassing op:

  • Interactieve elementen
    • Knoppen, links, formuliervelementen
    • Menu’s, tabbladen, accordeons
  • Structurele elementen
    • Landmarks (main, nav, aside)
    • Tabellen en lijsten
    • Secties en artikelen
  • Niet-tekstuele content
    • Afbeeldingen
    • Filmpjes en geluidsfragmenten
  • Dynamische content
    • Live regions

Hoe browsers de naam berekenen

Browsers gebruiken een logisch systeem om de toegankelijke naam te bepalen. Dit algoritme werkt met een duidelijke prioriteitsvolgorde. Browsers controleren altijd in deze volgorde en stoppen bij de eerste bruikbare naam:

1. aria-labelledby

Als een element het aria-labelledby-attribuut heeft, dan gebruikt de browser de tekst van de elementen waar naar wordt verwezen.

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

De ingebouwde HTML relaties, 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-attribuut

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 het artikel over voorleessoftware gebruiken

Met browser tools

Chrome en Firefox hebben een eigen accessibility tree. Deze geeft informatie over toegankelijkheid van bijna alle HTML-elementen. Hier kun je de naam van de elementen achterhalen. Open hiervoor de Inspector.

  • 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 een naam heeft, of niet. De inhoud 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

Van toegankelijke naam zie je misschien niet zo veel, maar het maakt het verschil tussen een website die werkt voor iedereen en een website die mensen 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? Kun je ze begrijpen zonder context? Dan zit je al goed op weg.

Onthoud de volgorde: aria-labelledby → aria-label → native HTML → inhoud van het element → title. En vergeet niet: de beste test is nog steeds een echte gebruiker met een schermlezer.

Bronnen