Ga naar hoofdinhoud

Labels

Geef een formulierveld een toegankelijke naam met een label

Elk formulierveld heeft een label nodig dat gekoppeld is aan het formulierveld met een for/id relatie. De labeltekst wordt dan de zogenaamde "toegankelijke naam" van het formulierveld.

Waarom is dit belangrijk?

  • Screenreader (schermlezer) gebruikers krijgen die naam voorgelezen als het veld toetsenbordfocus krijgt.
  • Voice recognition (stembediening) gebruikers kunnen het veld focus geven door die naam uit te spreken.
  • Muis- en touchscreen gebruikers kunnen het label aanklikken om het formulierveld focus te geven.

Het doel van een label is dat de gebruiker de vraag begrijpt. Een effectief label is duidelijk en beschrijvend. Is er meer uitleg nodig? Gebruik dan een beschrijving (description).

De for/id relatie

Opzet in de HTML:

  • Geef het formulierveld een ID.
  • Geef het label het attribute for met als waarde de ID van het bijbehorende formulierveld.
<label for="kleur1">Wat is je lievelingskleur</label>
<input type="text" id="kleur1" name="lievelingskleur" />

Let op: De gebruikte ID's moeten uniek zijn voor de pagina, anders worden de verkeerde namen bij de velden voorgelezen.

Een snelle test of de koppeling werkt: klik op het label en ga na of het veld focus krijgt.

Doen: Gekoppeld label met for en id. Het <label>-element heeft een for attribuut (of htmlFor in React) dat verwijst naar het id van het bijbehorende formulierveld.

Zo werkt dit bijvoorbeeld met een <select>:

<label for="kleur2">Wat is je lievelingskleur?</label>
<select id="kleur2" name="lievelingskleur">
  <option>Rood</option>
  <option>Blauw</option>
  <option>Wit</option>
</select>

Het geven van een goede toegankelijke naam aan formuliervelden is nodig om te voldoen aan de WCAG-succescriteria:

Doen

Koppel het label aan het formulierveld.

Doen

Koppel het label aan het formulierveld (select).

Niet doen

Een div in plaats van een label gebruiken.

De for en id koppeling werkt alleen met een label-element.
Wat is je lievelingskleur?

Niet doen

Een label zonder gekoppelde input. Door het label-element te gebruiken zonder for mis je de koppeling tussen het label en de input voor mensen die de visuele context niet waarnemen.

Over deze richtlijnen

Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Deel je mening op GitHub met je suggesties.