Deze website maakt gebruik van cookies
Wij, en derde partijen, maken op onze website gebruik van cookies. Wij gebruiken cookies om ervoor te zorgen dat onze website goed functioneert, om jouw voorkeuren op te slaan, om inzicht te verkrijgen in bezoekersgedrag, maar ook voor marketing en social media doeleinden (laten zien van gepersonaliseerde advertenties). Door op ‘Accepteren’ te klikken, ga je akkoord met het gebruik van alle cookies. In onze Cookieverklaring kun je meer lezen over de cookies die wij gebruiken en kun je jouw voorkeuren opslaan of wijzigen. Door ‘Weigeren’ te klikken ga je alleen akkoord met het gebruik van functionele cookies.
Wat zijn ARIA-labels en hoe gebruik je ze?
Leesniveau: gemiddeld
23 februari 2026
ARIA staat voor Accessible Rich Internet Applications. Klinkt technisch – en dat is het ook een beetje – maar het idee erachter is simpel: je maakt je website begrijpelijk voor iedereen. Een ARIA-label is een onzichtbare beschrijving die je toevoegt aan een element op je website, bijvoorbeeld een knop, link of icoon. Die tekst is niet zichtbaar op het scherm, maar wordt wél voorgelezen door een schermlezer. Zo begrijpen ook blinde en slechtziende bezoekers wat een element doet.
23 februari 2026
ARIA staat voor Accessible Rich Internet Applications. Klinkt technisch – en dat is het ook een beetje – maar het idee erachter is simpel: je maakt je website begrijpelijk voor iedereen. Een ARIA-label is een onzichtbare beschrijving die je toevoegt aan een element op je website, bijvoorbeeld een knop, link of icoon. Die tekst is niet zichtbaar op het scherm, maar wordt wél voorgelezen door een schermlezer. Zo begrijpen ook blinde en slechtziende bezoekers wat een element doet.
Waarom is een ARIA label nodig?
Stel je voor: je hebt een knop met alleen een vergrootglas-icoon. Visueel snapt iedereen dat dit een zoekfunctie is. Maar een schermlezer “ziet” alleen een afbeelding of knop – zonder betekenis.
Met een aria-label voeg je die betekenis toe:
<button aria-label="Zoek"></button>
De schermlezer leest dan netjes: “Zoek, knop.” En ineens is je website een stuk toegankelijker.
De meeste moderne CMS-leveranciers bieden gelukkig bij relevante componenten de mogelijkheid om een ARIA-label in te vullen. Denk aan afbeeldingen, video’s, USP-blokken, iconen in de header of zelfs het logo.
Met een aria-label voeg je die betekenis toe:
<button aria-label="Zoek"></button>
De schermlezer leest dan netjes: “Zoek, knop.” En ineens is je website een stuk toegankelijker.
De meeste moderne CMS-leveranciers bieden gelukkig bij relevante componenten de mogelijkheid om een ARIA-label in te vullen. Denk aan afbeeldingen, video’s, USP-blokken, iconen in de header of zelfs het logo.
Wanneer gebruik je alt-tekst en wanneer ARIA-label?
Alt-tekst en aria-label worden vaak door elkaar gehaald, maar ze hebben elk hun eigen functie.
1_>
Decoratieve afbeelding
Bijvoorbeeld een sfeerfoto in een vacature.
Gebruik: alt="" Waarom? Omdat de afbeelding geen inhoudelijke informatie toevoegt. De tekst eromheen vertelt het verhaal al. Door de alt leeg te laten, voorkom je dat een schermlezer onnodige informatie voorleest.
(Wil je een zoekwoord verwerken voor SEO? Dan kan dat eventueel in de bestandsnaam of context, maar niet ten koste van toegankelijkheid.)
Gebruik: alt="" Waarom? Omdat de afbeelding geen inhoudelijke informatie toevoegt. De tekst eromheen vertelt het verhaal al. Door de alt leeg te laten, voorkom je dat een schermlezer onnodige informatie voorleest.
(Wil je een zoekwoord verwerken voor SEO? Dan kan dat eventueel in de bestandsnaam of context, maar niet ten koste van toegankelijkheid.)
2_>
Informatieve of functionele afbeelding
Bijvoorbeeld een afbeelding die linkt naar vacatures, of een beeld dat belangrijke inhoud ondersteunt. Gebruik een duidelijke alt-tekst of – als het om een knop of interactieve actie gaat – een ARIA-label.
3_>
Knoppen of links met alleen een afbeelding
Hier is een ARIA-label essentieel.
Niet: <img src="vergrootglas.svg" alt="vergrootglas">
Maar: <button aria-label="Vacatures zoeken"> <img src="vergrootglas.svg" alt=""> </button>
De actie staat centraal, niet het uiterlijk.
Niet: <img src="vergrootglas.svg" alt="vergrootglas">
Maar: <button aria-label="Vacatures zoeken"> <img src="vergrootglas.svg" alt=""> </button>
De actie staat centraal, niet het uiterlijk.
Praktische voorbeelden voor een werken-bij-site
1. Teamfoto op de ‘Over ons’-pagina
<img src="teamfoto.jpg" alt="Het marketingteam van Floyd & Hamilton">
Een schermlezer begrijpt nu dat dit een teamfoto is – en niet zomaar een willekeurig plaatje.
2. Decoratieve sfeerafbeelding in een vacature <img src="kantoor-lounge.jpg" alt=""> De afbeelding is puur sfeer. De inhoud zit in de vacaturetekst, dus de alt blijft leeg.
3. Afbeelding als link naar de vacaturepagina <a href="/vacatures" aria-label="Bekijk al onze vacatures"> <img src="werkenbij-banner.jpg" alt=""> </a> De banner is visueel, maar de actie – naar de vacatures gaan – wordt vastgelegd in het ARIA-label.
4. Pictogrammen bij arbeidsvoorwaarden <img src="icoon-pensioen.svg" alt="Goede pensioenregeling"> <img src="icoon-training.svg" alt="Ruimte voor trainingen en ontwikkeling"> Hier voegen de iconen inhoudelijke waarde toe. Zonder alt-tekst zou die informatie verloren gaan.
5. Sluitknop van een vacaturefilter (alleen een “X”) <button aria-label="Filter sluiten">×</button> Een schermlezer leest: “Filter sluiten, knop.” Dat is een wereld van verschil met: “kruisje.”
2. Decoratieve sfeerafbeelding in een vacature <img src="kantoor-lounge.jpg" alt=""> De afbeelding is puur sfeer. De inhoud zit in de vacaturetekst, dus de alt blijft leeg.
3. Afbeelding als link naar de vacaturepagina <a href="/vacatures" aria-label="Bekijk al onze vacatures"> <img src="werkenbij-banner.jpg" alt=""> </a> De banner is visueel, maar de actie – naar de vacatures gaan – wordt vastgelegd in het ARIA-label.
4. Pictogrammen bij arbeidsvoorwaarden <img src="icoon-pensioen.svg" alt="Goede pensioenregeling"> <img src="icoon-training.svg" alt="Ruimte voor trainingen en ontwikkeling"> Hier voegen de iconen inhoudelijke waarde toe. Zonder alt-tekst zou die informatie verloren gaan.
5. Sluitknop van een vacaturefilter (alleen een “X”) <button aria-label="Filter sluiten">×</button> Een schermlezer leest: “Filter sluiten, knop.” Dat is een wereld van verschil met: “kruisje.”
Handige tips
1. Beschrijf de betekenis, niet het uiterlijk
Niet: “Mensen op een foto in de zon”
Wel: “Teamuitje op het strand”
2. Vermijd dubbele informatie Staat er onder de foto al: “Ons sales team”? Dan kan de alt-tekst leeg blijven.
3. Wees actiegericht bij knoppen en links Niet: “Vergrootglas” Wel: “Vacatures zoeken”
4. Test met een schermlezer
Gebruik bijvoorbeeld:
2. Vermijd dubbele informatie Staat er onder de foto al: “Ons sales team”? Dan kan de alt-tekst leeg blijven.
3. Wees actiegericht bij knoppen en links Niet: “Vergrootglas” Wel: “Vacatures zoeken”
4. Test met een schermlezer
Gebruik bijvoorbeeld:
- VoiceOver (Mac)
- NVDA (Windows)
Waarom is dit zo belangrijk?
- Je website voldoet beter aan de WCAG-richtlijnen (en dus aan wetgeving). Zie ook artikel:
- Je maakt je site toegankelijk voor iedereen – ook voor mensen die niet kunnen zien wat er op het scherm staat.
- Je verhoogt de gebruiksvriendelijkheid én inclusiviteit.
- Je laat zien dat je als organisatie toegankelijkheid serieus neemt.
En zeker voor een werken-bij-site is dat belangrijk. Je wilt dat álle talenten zich welkom voelen – ook online.
In 5 stappen naar een data-driven recruitmentsite?
Waarom Floyd & Hamilton?
- Specialist in recruitmentsites & employer branding
- Ervaring met complexe integraties
- Focus op conversie en kandidaatbeleving
- Persoonlijke aanpak en korte lijnen
- Altijd gericht op duurzame partnerships
Kom in contact
Benieuwd wat wij voor jouw organisatie kunnen betekenen? Of gewoon eens sparren over hoe je jouw werkgeversmerk sterker kunt positioneren?
Ramses Serno
06 42 47 86 56Stuur een WhatsApp berichtStuur een e-mailTrots op onze klanten
Van toonaangevende corporates tot snelgroeiende organisaties — we hebben al vele mooie werkgevers geholpen hun zichtbaarheid te vergroten en talent aan te trekken. Wij zijn trots op langdurige samenwerkingen waarin we continu optimaliseren en innoveren.
Wij maken brand custom
recruitmentsites met het door
ons ontwikkelde Hamilton CMS
👋🏼.
Interesse?