Naar de inhoud
Afrekenbaar

Kennisbank

Knoppen en links zonder naam: de meest gemaakte fout na contrast

Een winkelwagentje, een vergrootglas, een hartje: prima pictogrammen, maar voor een schermlezer alleen "knop". Wie zo je shop gebruikt, moet raden.

Een knop met alleen een pictogram en een knop met een naam Links drie knoppen met alleen een pictogram; een schermlezer leest ze alle drie als "knop". Rechts dezelfde knoppen met een naam erbij.
Links: drie knoppen die alleen een tekeningetje zijn. Een schermlezer maakt daar drie keer “knop” van. Rechts: dezelfde knoppen met een naam, hardop of verborgen in een aria-label.

Wat we vinden

Links zonder naam stonden bij 51 van de 70 gemeten shops, samen op 1458 plekken. Knoppen zonder naam bij 24 shops, op 301 plekken. Daarmee is dit na contrast de meest voorkomende bevinding in onze metingen, en de kritiekste van de twee: een knop die je niet kunt benoemen, kun je niet gebruiken.

De vier vormen die we steeds terugzien

  1. De pictogramknop. Zoeken, winkelwagen, menu, verwijderen. Geef ze een aria-label: <button aria-label="Winkelwagen openen">.
  2. De lege link om een foto. De productkaart is één grote link met alleen een foto erin. Staat er geen alt-tekst in die foto, dan heeft de link geen naam.
  3. Vijf keer "lees meer". Een schermlezer kan een lijst van alle links opvragen. Vijf keer "lees meer" is dan vijf keer hetzelfde. Zet erbij wáárover: "Lees meer over onze verzendkosten".
  4. De knop die tekst heeft die niet zichtbaar is. Een knop met alleen een achtergrondplaatje. Zet er tekst in en verberg die visueel, in plaats van de tekst weg te laten.

Wat wél en niet telt als naam

Telt: de tekst in de knop, een aria-label, de alt-tekst van een afbeelding erbinnen, of tekst waarnaar met aria-labelledby wordt gewezen. Telt niet: een title-attribuut (dat is een muistooltip en verschijnt op een telefoon nooit), of tekst die met display:none verborgen is.

Let op: wat je ziet en wat er gezegd wordt

Staat er tekst naast het pictogram, dan hoort het aria-label die tekst te bevatten. Een knop waarop "Bestellen" staat maar die als "Verder" wordt voorgelezen, is verwarrend voor iemand die met stembediening werkt: die zegt "klik Bestellen" en er gebeurt niets. Dat is een eigen WCAG-eis (2.5.3 Label in naam).

Zo controleer je het

Zet je muis weg en druk op Tab. Bij elke stap: kun je in één woord zeggen wat deze knop doet? Kun je dat niet, dan kan een schermlezer het ook niet.

Bronnen

  • Eigen meting bij 70 Nederlandse webshops, 14 september 2026: link-name bij 51 shops (1458 plekken), button-name bij 24 shops (301 plekken)
  • WCAG 2.1, succescriteria 2.4.4 Linkdoel, 4.1.2 Naam, rol, waarde en 2.5.3 Label in naam

Verder lezen

Gratis check van je homepage Meer uitleg