Terug naar begrippenlijst
ARIA-label
Een ARIA-label is een HTML-attribuut waarmee je een element een duidelijke, “leesbare” naam geeft voor hulpmiddelen zoals screenreaders. Dat maakt je website direct begrijpelijker voor mensen die niet (goed) kunnen zien wat er op het scherm gebeurt. Het wordt vooral gebruikt bij onderdelen waar geen zichtbare tekst staat, zoals een knop met alleen een icoon of een inputveld zonder label. Voor bezoekers die een screenreader gebruiken is dat essentieel, want zonder zo’n label hoort iemand alleen “knop” of “invoerveld” en dat zegt precies niks.
Inhoudsopgave
Wanneer gebruik je ARIA-label?
Je gebruikt ARIA-label vooral als er geen (goede) tekst op het scherm staat die de functie van het element uitlegt. Een klassieker is een hamburger-icoon in een menu. Visueel snapt bijna iedereen “dit is het menu”, maar een screenreader ziet alleen een knop met een icoon. Met ARIA-label maak je daarvan bijvoorbeeld “Menu openen”.
Hetzelfde geldt voor icon-knoppen zoals een prullenbakje (verwijderen), een vergrootglas (zoeken) of een kruisje (sluiten). Zolang, de betekenis niet letterlijk als tekst in beeld staat, heeft een screenreader hulp nodig.
Niet alleen netjes, ook gewoon nodig
Toegankelijkheid klinkt soms als iets voor “later”, maar ARIA-labels zijn vaak kleine ingrepen met groot effect. Je maakt je site begrijpelijker voor mensen met een visuele beperking, maar je helpt ook iedereen die op een andere manier navigeert, zoals met een toetsenbord of spraakbesturing.
Daarnaast wordt toegankelijkheid steeds serieuzer genomen. Veel organisaties willen (of moeten) voldoen aan WCAG-richtlijnen. ARIA-label is niet de enige knop waar je aan draait, maar het is wel eentje die je snel en netjes kunt regelen.
Eerst semantische HTML, dan ARIA
Dit is een belangrijke nuance: ARIA-label is handig, maar niet je standaard oplossing voor alles. In veel gevallen is een “normaal” label in de HTML beter. Bijvoorbeeld bij formuliervelden hoort er eigenlijk een zichtbaar label te zijn, of ten minste een label dat correct gekoppeld is. Dat is vaak robuuster en beter te begrijpen, óók voor mensen zonder screenreader.
ARIA is bedoeld om gaten te dichten als het met standaard HTML niet lukt, niet om standaard HTML te vervangen. Als je overal ARIA-labels plakt omdat het sneller is dan een goed label ontwerpen, dan bouw je een site die technisch “iets roept”, maar inhoudelijk nog steeds verwarrend kan zijn.
Wat is een goed ARIA-label?
Een goed ARIA-label is kort, concreet en beschrijft de actie of het doel. “Klik hier” is zinloos, “Sluit pop-up” is duidelijk. “Zoeken” voor een vergrootglas-knop kan prima, maar “Zoek in producten” is beter als het context geeft. Je schrijft dus niet wat het is (“knop”), maar wat het doet.
Het is ook belangrijk om het ARIA-label consistent te houden. Als je op de ene plek “Menu openen” gebruikt en op de andere “Navigatie tonen”, dan kan dat onnodig onrustig voelen voor screenreader-gebruikers. Kies één formulering en herhaal die.
Voorkom dubbele of vage labels
Een veelvoorkomende fout is dubbele informatie. Als een knop al een zichtbare tekst heeft, en je zet er ook nog een ARIA-label op met iets anders, dan kan een screenreader rare of dubbele output geven. Dan denkt de gebruiker: wat is dit nou?
Ook zie je vaak ARIA-labels die te algemeen zijn. “Icoon” of “Button” helpt niemand. En een andere: een ARIA-label gebruiken waar eigenlijk ARIA-labelledby beter past, bijvoorbeeld als je al een tekst op de pagina hebt staan die de knop uitlegt. De hoofdregel blijft: gebruik echte tekst en semantische HTML waar het kan, en ARIA waar het moet.
Veelgestelde vragen
ARIA staat voor Accessible Rich Internet Applications. Het is een set attributen om webinterfaces toegankelijker te maken voor assistive technologies zoals screenreaders.
Gebruik ARIA-label vooral bij elementen zonder zichtbare tekst, zoals icon-knoppen. Bij formuliervelden is een gekoppeld label-element meestal beter.
Het kan op veel interactieve elementen, maar het is vooral bedoeld om een toegankelijk naam te geven waar die ontbreekt. Overmatig gebruik lost slechte HTML niet op.
ARIA-label bevat de tekst direct in het attribuut. ARIA-labelledby verwijst naar bestaande tekst op de pagina (via een id), zodat je geen dubbele teksten hoeft te onderhouden.
Stan Classens Front-end developer
Gerelateerde begrippen
- Above the Fold
- Back-end
- Bug
- Console log
- Contextgevoelige navigatie
- Cookiewet
- CSS
- CSS Grid Layout
- Debugging
- Drag-and-drop builder
- Error handling
- GitHub
- GreenSock Animation Platform
- JSON
- Laadtijd
- Lazy loading
- Micro-interactions
- Pagebuilder
- Sorteeralgoritme
- Third-party cookies
- VS Code
- Vue.js
- Website beveiligingsheaders
