ibin
Meestal kritiekLeestijd: 2 min.

Geef elke knop een duidelijke naam

Maak de actie van elke knop begrijpelijk in tekst, ook wanneer de knop alleen een pictogram toont.

Waarom het belangrijk is

Een knop zonder naam wordt mogelijk alleen als “knop” voorgelezen, waardoor gebruikers van schermlezers en stembediening hem niet kunnen herkennen.

Zo los je het op

  1. Gebruik bij voorkeur zichtbare knoptekst die de actie beschrijft.

  2. Voeg een aria-label toe wanneer een knop met alleen een pictogram echt nodig is.

  3. Controleer dat herhaalde knoppen ook buiten hun context duidelijk blijven.

Voorbeeld

Voor
<button>
  <svg aria-hidden="true"><!-- zoekpictogram --></svg>
</button>
Na
<button aria-label="Zoeken">
  <svg aria-hidden="true"><!-- zoekpictogram --></svg>
</button>

Zo controleer je of het opgelost is

Controleer je pagina opnieuw met ibin. Het probleem verdwijnt uit je rapport zodra het overal is opgelost. Probeer het daarna zelf uit, zoals een bezoeker dat zou doen.

  • Controleer de pagina opnieuw en kijk of het probleem uit je rapport verdwenen is.
  • Probeer het aangepaste deel zelf: met een muis, met alleen een toetsenbord en ingezoomd.
  • Vraag als het kan iemand die een schermlezer gebruikt om het ook te proberen.
Voor je ontwikkelaar

Richtlijnen: WCAG 4.1.2 (A)

button-name · Achtergrondinformatie (in het Engels)

Ook beschikbaar in English, Français, Deutsch