Semantische HTML: de basis van toegankelijkheid
Waarom ARIA-labels essentieel zijn
Schermlezers zijn onmisbaar voor veel gebruikers. Ze lezen webpagina’s hardop en helpen blinden en slechtzienden het internet te gebruiken. Maar ze kunnen alleen voiceover geven aan wat ze kunnen “zien” — en dat is precies waar ARIA-labels in het spel komen.
Een schermlezer kan een knop zien, maar niet altijd begrijpen wat die knop doet. Vooral niet als je een pictogram hebt zonder tekst. ARIA — Accessible Rich Internet Applications — biedt een manier om die informatie toe te voegen. Het’s niet ingewikkelder dan je misschien denkt.
Wat je in dit artikel leert
- Het verschil tussen aria-label, aria-labelledby en aria-describedby
- Wanneer je welk attribuut moet gebruiken
- Praktische voorbeelden met code
- Veelgemaakte fouten en hoe je die vermijdt
- Testen of je ARIA correct werkt
aria-label: het eenvoudigste label
aria-label is de simpelste manier om een label toe te voegen. Je voegt het direct toe aan het element waar het voor bedoeld is. Het’s ideaal voor elementen zonder zichtbare tekst, zoals iconknoppen.
<button aria-label="Menu sluiten"><i class="fas fa-times"></i></button>
Een schermlezer zal hier zeggen: “Menu sluiten, knop” in plaats van gewoon “knop” zonder context. Het verschil is enorm voor gebruikers. Je gebruikt aria-label vooral voor:
- Knoppen met alleen pictogrammen
- Icoontjes die een actie triggeren
- Zoekvelden zonder zichtbaar label
- Navigatiebalken met pictogrammen
Het enige voorbehoud: aria-label overschrijft zichtbare tekst volledig. Als je een knop hebt met zichtbare tekst, gebruik dan aria-label niet. De zichtbare tekst is al het label.
aria-labelledby: verbinden met bestaande labels
aria-labelledby werkt anders dan aria-label. In plaats van nieuwe tekst toe te voegen, verwijst het naar een ander element op de pagina. Dit is handig wanneer je al een zichtbaar label hebt en dat label ook voor schermlezers beschikbaar moet zijn.
<h2 id="contactForm">Neem contact op</h2>
<form aria-labelledby="contactForm">...</form>
Nu weet een schermlezer dat dit formulier “Neem contact op” heet. Je linked eigenlijk de heading aan het formulier. Het’s als zeggen: “Hé schermlezer, zie je die heading hierboven? Dat’s het label van dit formulier.”
Dit werkt ook voor elementen met meerdere labels. Je kunt zelfs twee id’s gebruiken: aria-labelledby=”id1 id2″. De schermlezer zal beide teksten achter elkaar voordragen. Handig voor complexe formulieren.
aria-describedby: extra informatie voor complexe elementen
aria-describedby voegt extra beschrijvende informatie toe aan een element. Het’s anders dan aria-label en aria-labelledby. Die twee geven het element een naam. aria-describedby geeft aanvullende details.
<input type="password" aria-describedby="pwd-hint">
<p id="pwd-hint">Minimaal 8 karakters, inclusief cijfers</p>
Praktisch voorbeeld: je hebt een wachtwoordveld. De gebruiker weet dat het een wachtwoord is (dat’s het label). Maar wat zijn de eisen? Daar is aria-describedby voor. Na het label voordragen, zegt de schermlezer ook de beschrijving.
Je kan aria-describedby combineren met aria-label of aria-labelledby. Dus je kan zeggen: “Dit element heet X (label) en hier’s extra info Y (beschrijving)”. Beide worden voorgedragen, in die volgorde.
Praktijktip:
Gebruik aria-describedby voor foutmeldingen, wachtwoordvereisten, helpteksten, en aanvullende instructies. Niet voor kernlabels — daarvoor zijn aria-label en aria-labelledby.
Stap voor stap: implementatie checklist
Het implementeren van ARIA-labels is een proces. Volg deze stappen om het goed te doen:
1
Identificeer elementen zonder labels
Loop je site door en zoek elementen waar de betekenis niet duidelijk is voor schermlezers. Pictogramknoppen, zoekvelden, dynamische content. Dit zijn kandidaten voor ARIA.
2
Kies het juiste attribuut
Heb je al zichtbare tekst die je kan gebruiken? Dan aria-labelledby. Alleen pictogram? aria-label. Aanvullende details? aria-describedby. Denk logisch na.
3
Schrijf duidelijke, beknopte tekst
ARIA-labels moeten kort zijn. “Menu openen” is beter dan “Klik hier om het navigatiemenu in of uit te schakelen”. Schermlezers lezen alles op, dus hou het beperkt.
4
Test met een schermlezer
Download NVDA (gratis, Windows) of gebruik de ingebouwde schermlezers van je OS. Luister naar hoe je site klinkt. Is het duidelijk? Verbeter het tot dat het intuïtief is.
5
Documenteer je ARIA-labels
Noteer welke ARIA-labels je waar hebt gebruikt en waarom. Dit helpt toekomstige developers (en jezelf) om het systeem te begrijpen en consistent uit te breiden.
Veelgemaakte fouten en hoe je ze vermijdt
Aria-label gebruiken als er al zichtbare tekst is
Fout: <button aria-label=”Opslaan”>Save</button>
Goed: <button>Opslaan</button>
Zichtbare tekst is altijd het label. ARIA overschrijft het, dus je krijgt verwarring. Gebruikers horen het Nederlands ARIA-label maar zien Engelse tekst.
Aria-labelledby gebruiken zonder id op het gerefereerde element
Fout: <h2>Mijn heading</h2><form aria-labelledby=”heading”>
Goed: <h2 id=”heading”>Mijn heading</h2><form aria-labelledby=”heading”>
Aria-labelledby wijst naar een id. Zonder id werkt het niet. Je schermlezer vindt niks en het element blijft ongelabeld.
Te lange ARIA-labels
Fout: aria-label=”Klik hier om het dropdown-menu uit te klappen en alle beschikbare opties te zien”
Goed: aria-label=”Menu openen”
Schermlezers lezen alles. Lange labels zijn vermoeiend. Hou het kort en actiegericht.
Aria-describedby gebruiken voor het label zelf
Fout: <input aria-describedby=”name-label”><label id=”name-label”>Naam</label>
Goed: <input aria-labelledby=”name-label”><label id=”name-label”>Naam</label>
Aria-describedby is voor extra info, niet voor het primaire label. Dat’s wat aria-labelledby is voor.
Tools om je ARIA te testen
Wil je controleren of je ARIA-labels correct werken? Gebruik deze tools:
NVDA (gratis)
Gratis schermlezer voor Windows. Download, installeer, en luister naar je site. Het voordragen van ARIA-labels klinkt duidelijk.
macOS VoiceOver (ingebouwd)
Macs hebben VoiceOver al ingebouwd. Zet het aan in Instellingen Toegankelijkheid. Ideaal voor snel testen.
Axe DevTools
Browser-extensie die je pagina scant op ARIA-problemen. Geeft concrete suggesties voor verbetering. Snel en effectief.
WAVE (WebAIM)
Visueel overzicht van je accessibility-issues. Laat zien waar ARIA-labels ontbreken of fout zijn. Gratis online tool.
Samenvatting: ARIA-labels zijn het verschil
ARIA-labels lijken ingewikkeld, maar zijn het niet. aria-label voegt een naam toe. aria-labelledby verwijst naar bestaande tekst. aria-describedby voegt details toe. Dat’s het kernidee.
Wat je onthouden moet: niet alle gebruikers zien je interface. Veel gebruikers luisteren ernaar. Als je ARIA-labels toevoegt, zorg je ervoor dat de audio-ervaring net zo duidelijk is als de visuele ervaring. Dat’s echte inclusief ontwerp.
Start vandaag. Identificeer drie elementen zonder duidelijke labels. Voeg ARIA toe. Test met een schermlezer. Je zal merken hoe groot het verschil is.
Disclaimer
Dit artikel is informatief van aard en gebaseerd op WCAG 2.1 AA-richtlijnen en best practices voor webtoegankelijkheid. De voorbeelden en richtlijnen zijn bedoeld als educatief materiaal. Hoewel we ernaar streven accurate informatie te verstrekken, kunnen omstandigheden variëren en kunnen wettelijke vereisten per land verschillen. Voor specifieke compliance-vragen raadpleeg je altijd een toegankelijkheidsexpert of juridisch adviseur. De inhoud is niet bedoeld als juridisch advies.
