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>Geef ons uw feedback:
<textarea rows="5" cols="50" name="feedback"></textarea>
</label>

Value attribuut

Het is niet toegestaan het value-attribuut als enige label te gebruiken:

Voorbeeld (niet goed)

enkel value atribuut, geen labels

<input type="text" value="Naam" />
<input type="text" value="E-mail" />

Voorbeeld (goed)

value en labels

<label for="naam">Naam: <input id="naam" type="text" value="Naam" /></label>
<label for="email">E-mail: <input id="email" type="text" value="E-mail" /></label>

Placeholder attribuut

Ook het HTML5 placeholder attribuut mag het label-element niet vervangen:

Voorbeeld (niet goed)

enkel placeholder attributen

<input type="text" placeholder="Naam" />
<input type="text" placeholder="E-mail" />

Voorbeeld (goed)

placeholder attributen en labels

<label for="naam">Naam: <input id="naam" type="text" placeholder="Jan Peeters"></label>
<label for="email">E-mail: <input id="email" type="email" placeholder="jan@voorbeeld.be"></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.

Zelf testen

Ga na of er op de website formuliervelden zijn gebruikt. Controleer of alle formuliervelden zijn voorzien van een label dat correct verbonden is.

Een eenvoudige visuele manier om te controleren of labels zijn gebruikt, is het aanklikken van de instructietekst. Als er niets gebeurt als je op de instructietekst klikt, is ofwel geen label gebruikt of komen de waarden van het for-attribuut van het label en het id-attribuut van het formulierveld niet overeen. Dan moet u uw site aan passen.

Als het label wel juist gekoppeld is, zal de knipperende tekstcursor bij het aanklikken van het label automatisch in het tekstveld (input type="text"> of textarea>) worden verplaatst. Aankruisvakjes input type="checkbox" zullen aan- of uitgevinkt worden en keuzerondjes input type="radio" geselecteerd. Bij een keuzelijst select zal het eerste onderdeel (option) focus krijgen.

U kunt ook in de html-code de aanwezigheid van een identiek for- en id-attribuut controleren.

Wave toolbar in Firefox:

  • Errors, features and alerts
  • Kijk of id en for worden getoond en of die identiek zijn.
    • Ja; dan is aan dit ijkpunt voldaan.
    • Nee; pas uw website aan.

Accessibility toolbar in Internet Explorer:

  • Structuur > fieldset/labels
  • Kijk of id en label for worden getoond en of die identiek zijn.
    • Ja; dan is aan dit ijkpunt voldaan.
    • Nee; pas uw website aan.