Je hebt knoppen zonder naam: zo geef je icoonknoppen een stem

Een hamburgermenu, een kruisje om te sluiten, een vergrootglas om te zoeken: knoppen met alleen een icoon zijn overal. Voor een schermlezer is zo'n knop vaak gewoon "knop", zonder te zeggen wat hij doet.

In het kud-rapport Je hebt knoppen zonder naam

Waarom het uitmaakt

Wie je site met een schermlezer gebruikt, kan niet raden wat "knop" doet. Het menu openen of een pop-up sluiten wordt zo een gok.

Spraakbesturing heeft hetzelfde probleem: wie "klik menu" zegt, heeft een knop nodig die zo heet.

Zo los je het op

Geef elke knop met alleen een icoon een aria-label dat zegt wat hij doet: "Menu openen", "Sluiten", "Zoeken".
Of zet zichtbare of verborgen tekst in de knop, bijvoorbeeld in een span met een sr-only-klasse.
Gebruik een echte button voor dingen die iets doen, en een a voor links naar een andere pagina. Een klikbare div is voor toetsenbord en schermlezer onzichtbaar.
Houd het label kort en beschrijf de actie, niet het plaatje: "Sluiten", niet "Kruisje".

<button type="button" aria-label="Menu openen">
  <svg aria-hidden="true">...</svg>
</button>

Op jouw platform

WordPress en Shopify: Meestal zit het in het thema: het menu-icoon, de winkelwagen, de zoekknop of de pijltjes van een slider. Vraag je developer om aria-labels toe te voegen.

Veelgestelde vragen

Is een title-attribuut genoeg?

Niet betrouwbaar. Gebruik aria-label of tekst in de knop; die worden door alle schermlezers voorgelezen.

Moet het icoon zelf ook iets krijgen?

Geef decoratieve iconen aria-hidden="true", dan leest een schermlezer alleen het label voor.