Toegankelijke iconen en svg: aria-hidden en title — praktijkgids (24 augustus 2025)
Waarom correcte aria-hidden en title bij iconen essentieel zijn
Iconen dragen vaak functionele informatie of versieren alleen de interface. Zorg dat schermlezers precies weten wanneer een icoon betekenis heeft en wanneer niet, zodat gebruikers niet informatie missen of juist met overbodige berichten worden overstelpt.
Gebruik semantische HTML waar mogelijk en beperk aria‑attributen tot gevallen waarin semantiek niet volstaat. Dit vermindert fouten en maakt onderhouden makkelijker voor designers, developers en redacties.
belangrijke wcag succescriteria
Controleer vooral: WCAG 2.2 succescriterium 1.1.1 non‑text content (zorg voor tekstalternatieven of aria-hidden voor decoratieve content) en 4.1.2 name, role, value (accessible name moet overeenkomen met zichtbare label). Voer daarnaast tests uit op informatie- en relatieconsistentie (1.3.1) en toets of interactieve iconen toetsenbordtoegankelijk zijn (2.1.1).
praktische richtlijnen per gebruiksdoel
Decoratieve iconen: markeer als toegankelijkheidsdecoratie met aria-hidden=”true” of verwijder uit de toegankelijkheidsboom. Functionele iconen: geef een toegankelijk naam via aria-labelledby of een ingebouwde title/desc die correct wordt gekoppeld aan het svg-element.
Structurele of informatieve iconen: geef een expliciete naam en rol (role=”img” + aria-labelledby). Vermijd title alleen als je niet zeker weet dat de accessibility tree het juist mappt; aria-labelledby is explicieter.
snelle checklist voor elke icoonimplementatie
- Is het icoon puur decoratief? Zo ja, gebruik aria-hidden=”true” en geen title/alt.
- Is het icoon interactief of informatief? Zo ja, zorg voor een toegankelijke naam via aria-labelledby of alt/aria-label.
- Gebruik je semantische elementen (img, button) in plaats van div/span met aria als dat mogelijk is?
- Test met een schermlezer en de accessibility tree in DevTools, naast axe, lighthouse en pa11y.
concrete codevoorbeelden
Decoratief inline svg (gebruik aria-hidden):
<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24"><path d="..."/></svg>Informativ inline svg met aria-labelledby (aanbevolen):
<svg role="img" width="16" height="16" viewBox="0 0 24 24" aria-labelledby="icon-title-1"><title id="icon-title-1">nieuw bericht</title><path d="..."/></svg>Icon in een knop met tekstvisueel verborgen label (houd label in DOM voor schermlezers):
<button><svg aria-hidden="true" focusable="false" width="16" height="16"><path d="..."/></svg><span class="sr-only">verzenden</span></button>css snippet voor visueel verborgen tekst
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}praktische teststappen
Doe altijd een combinatie van geautomatiseerde en handmatige tests: 1) run axe, lighthouse of pa11y om snelle problemen te vinden; 2) inspecteer de accessibility tree in DevTools en controleer dat iconen de verwachte role/name hebben; 3) test met een schermlezer (NVDA/VoiceOver) en keyboard om te horen of iconen correct worden aangekondigd of stil blijven; 4) voer een contentreview uit met redacties om te bevestigen dat labels correct en zakelijk zijn.
Noteer misstanden in tickets met een voorbeeld-HTML-snippet, verwachte accessible name en een verwijzing naar WCAG 2.2 (bijv. 1.1.1, 4.1.2) zodat ontwikkelaars en redacties snel kunnen handelen.
tactische tips voor teams
Definieer in je design system een duidelijke pattern: wanneer is een icoon decoratief, wanneer informatief, en welke attributen horen erbij. Automatiseer checks in CI met axe/pa11y en voeg een korte reviewstap toe voor redacties bij nieuwe iconen en labels.
Documenteer voorbeelden in componentbibliotheek met de juiste codevoorbeelden en checklist, zodat designers, developers en redacties dezelfde taal spreken.
trefwoorden: toegankelijke iconen, svg aria-hidden, svg title aria-labelledby, WCAG 2.2, accessible name, icon accessibility, aria-guidelines