Iconen zonder tekst: hoe weet een bezoeker wat ze doen?

Bovenaan veel websites staat een rijtje van vier pictogrammen: een vergrootglas, een poppetje, een winkelmandje en drie horizontale streepjes. Wie ze ziet, snapt ze meestal. Wie ze hoort via een screenreader, krijgt soms vier keer “knop” te horen, zonder verdere uitleg. En wie ze ziet maar niet herkent, bijvoorbeeld een oudere bezoeker die het streepjesmenu nooit eerder gebruikte, moet maar gokken. Iconen toegankelijk maken komt neer op twee vragen: heeft elk icoon een naam voor hulpsoftware, en begrijpt een gewone bezoeker wat het doet?

Een icoon heeft voor de computer geen betekenis

Een icoon is technisch een afbeelding, een svg of een teken uit een iconfont. In alle drie de gevallen weet de browser niet dat het vergrootglas “zoeken” betekent. Die naam moet u er zelf bij leveren. WCAG noemt dat de toegankelijke naam van een knop of link (succescriterium 4.1.2, naam, rol en waarde). Ontbreekt die naam, dan is de knop voor een screenreadergebruiker onbruikbaar, en voor iemand die zijn computer met spraak bedient ook: die kan niet zeggen “klik op zoeken” als de knop niet zoeken heet.

Iconfonts hebben nog een eigen probleem. Sommige screenreaders lezen het onderliggende teken voor, wat een vreemd symbool of een letter oplevert. Daarom moet een iconfont-icoon altijd verborgen worden voor hulpsoftware, met de naam ergens anders.

Drie manieren om een icoon een naam te geven

1. Zichtbare tekst ernaast

De beste oplossing is ook de eenvoudigste: zet er een woord bij. “Menu” onder de drie streepjes. “Zoeken” naast het vergrootglas. Iedereen begrijpt het, ook mensen die het icoon niet kennen, en de knop heeft meteen een naam.

<button>
  <svg aria-hidden="true" focusable="false">...</svg>
  Menu
</button>

2. Visueel verborgen tekst

Is er echt geen ruimte, dan zet u de tekst in de knop en verbergt u hem visueel met een CSS-klasse. Screenreaders lezen hem wel voor. WordPress-thema’s hebben daar vaak al een klasse voor, meestal screen-reader-text.

<a href="/winkelwagen">
  <svg aria-hidden="true" focusable="false">...</svg>
  <span class="screen-reader-text">Winkelwagen</span>
</a>

3. Een aria-label

U kunt de naam ook als attribuut meegeven:

<button aria-label="Zoeken">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

Dat werkt, maar heeft nadelen: de browservertaling vertaalt aria-labels niet altijd mee, en het is makkelijk om te vergeten bij een aanpassing. Wanneer aria-label de juiste keuze is en wanneer niet, staat uitgebreid in aria-label: wanneer wel en wanneer niet.

Bij alle drie geldt: het icoon zelf krijgt aria-hidden="true", zodat het niet dubbel of als vreemd teken wordt voorgelezen.

Waarom een tooltip niet genoeg is

Een veelgebruikte tussenoplossing is een tooltip: bij het aanwijzen met de muis verschijnt een klein labeltje, vaak via het title-attribuut. Dat lijkt op een naam, maar het schiet op meerdere punten tekort:

• Op een telefoon of tablet is er geen muis, dus ook geen tooltip.
• Wie met het toetsenbord navigeert, ziet een title-tooltip meestal niet.
• Screenreaders gaan wisselend met het title-attribuut om. U kunt er niet op rekenen.
• De bezoeker moet eerst gaan zoeken met de muis voordat hij weet wat er staat.

Een tooltip kan aanvullen, maar is geen vervanging voor een echte naam. Wilt u tooltips toch gebruiken, lees dan tooltips toegankelijk maken voor de valkuilen.

De gebruikelijke verdachten

Icoon	Typisch probleem	Goede naam
Drie streepjes	Geen naam, of “hamburger”	“Menu”, liefst ook zichtbaar
Vergrootglas	Knop zonder naam	“Zoeken”
Winkelmandje met getal	Alleen het getal wordt voorgelezen	“Winkelwagen, 2 producten”
Social-iconen	“Link, link, link”	“Facebook”, “Instagram”, “LinkedIn”
Kruisje in pop-up	“Knop” of “x”	“Sluiten”
Pijltjes in slider	Naamloos	“Vorige dia”, “Volgende dia”

Bij social-iconen in de footer is het goed om te weten waar de link heen gaat. “Facebook” is voldoende; “Volg ons op Facebook” mag ook. Gaat de link naar een nieuw venster, vermeld dat dan erbij. Het hamburgermenu heeft nog meer aandachtspunten dan alleen een naam; die staan in het hamburgermenu op mobiel.

Let op de zichtbare tekst

Heeft een knop zowel een zichtbaar woord als een verborgen naam, zorg dan dat de verborgen naam met het zichtbare woord begint. Staat er “Menu” op de knop, noem hem dan niet “Navigatie openen”. Iemand die met spraakbediening “klik op menu” zegt, moet de knop kunnen vinden. WCAG noemt dat “label in naam” (2.5.3).

Zelf controleren

1. Draai de gratis WAVE-extensie op uw homepage. Knoppen en links zonder naam verschijnen als rode fout, vaak met de melding “Empty button” of “Empty link”.
2. Gebruik de toegankelijkheidsweergave in de ontwikkelaarstools van Chrome of Firefox. Klik op een icoon en kijk bij “Name”. Is dat veld leeg, dan heeft het icoon geen naam.
3. Zet op uw telefoon VoiceOver (iPhone) of TalkBack (Android) aan en veeg langs de header. U hoort meteen welke knoppen naamloos zijn.
4. Laat iemand die uw site niet kent de iconen benoemen zonder te klikken. Waar hij twijfelt, heeft u een zichtbaar woord nodig.

In page builders zoals Elementor zit het probleem vaak in widgets die alleen een icoon tonen, zoals een icon-box of een social-iconen-widget. Sommige hebben een veld voor een label, andere niet. Op de pagina Elementor toegankelijk maken leest u wat daar instelbaar is en wat maatwerk vraagt.

Iconen zijn prima, als ze niet alleen staan

Pictogrammen helpen veel bezoekers om snel hun weg te vinden. Het gaat pas mis als het icoon het enige is wat er staat. Een naam voor de screenreader en, waar het kan, een zichtbaar woord: daarmee is het grootste deel opgelost. Hoe dit past in de rest van een toegankelijke site, leest u op onze overzichtspagina over toegankelijkheid.