4.1.1 Labels en formuliervelden zijn verbonden

Formulieren bestaan enerzijds uit formuliervelden (zoals invoervelden, keuzerondjes, aankruisvakjes en keuzelijsten) en anderzijds uit instructies of labels, die informatie geven bij het veld.
Verbind elk veld met het bijhorende label met behulp van het label-element.

Hoe?

• Voeg aan ieder formulierveld een id-attribuut toe met een unieke waarde.
• Plaats elk label in een label-element.
• Herhaal de waarde van het id-attribuut in het for-attribuut van het label-element.

Waarom?

• Labels zijn in de eerste plaats een belangrijke hulp voor gebruikers van screenreaders. Dankzij de label/for-constructie kan de juiste instructie voorgelezen worden als de cursor op een formulierveld terechtkomt.
• Het gebruik van labels heeft ook voordelen voor muisgebruikers: om een keuzerondje of aankruisvakje te selecteren of om de toetsenbordfocus te verplaatsen naar een tekstveld of keuzelijst, volstaat het om op de instructietekst te klikken. Bezoekers met een motorische beperking maken hier dankbaar gebruik van.

Voorbeeld

<label for="naam">Uw naam</label>
<input type="text" id="naam" name="naam" />

<input type="checkbox" name="wagen" id="wagen">
<label for="wagen">Ik heb een eigen wagen</label>

<label for="vertrek">Station van vertrek:</label>
<select name="vertrek" id="vertrek">
  <option value="0">Leuven</option>
  <option value="1">Gent</option>
  <option value="2">Brussel</option>
</select>

<label for="feedback">Geef ons uw feedback:</label>
<textarea id="feedback" name="feedback" rows="5" cols="50"></textarea>

De variant waarbij het veld en de instructietekst genest wordt binnen de begin- en eindtags <label> en </label> is ook toegestaan.

Voorbeeld

<label for="feedback">Geef ons uw feedback:
  <textarea rows="5" cols="50" id="feedback" name="feedback">
  </textarea>
</label>

Let op

• We verwijzen naar volgend ijkpunt voor velden die geen zichtbaar label hebben.
• Verzendknoppen (<input type="submit">) hebben geen label nodig. Het opschrift van de knop (de waarde van het value-attribuut) neemt die rol over.
• We ontraden het gebruik van multiselect keuzelijsten: een reeks met aankruisvakjes vormt in alle gevallen een beter alternatief. Meer informatie in het artikel Meerdere selecties in keuzelijst.

Aanbevelingen

• Voor tekstvelden en keuzelijsten plaatst u het label bij voorkeur net boven het veld. Dit vergemakkelijkt het 'scannen' van een formulier en het voorkomt horizontaal scrollen (voor bijvoorbeeld slechtzienden).
• Voor keuzerondjes en aankruisvakjes plaatst u het label bij voorkeur net achter het veld.