Labels in een formulier

Een label geeft aan welke gegevens de gebruiker bij een formulierveld in kan vullen. Voor de toegankelijkheid van labels en dus ook formuliervelden zijn de volgende punten belangrijk:

• Geef een formulierveld een toegankelijke naam met een label.
• De zichtbare naam moet overeenkomen met de toegankelijke naam.
• Zet het label boven het formulierveld.
• Zorg ervoor dat het label altijd zichtbaar is.
• Zet alleen tekst in het label.
• Gebruik duidelijke labelteksten.

Geef een formulierveld 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 verplicht volgens WCAG. Deze succescriteria zijn relevant:

• 2.4.6: Koppen en labels (niveau AA)
• 3.3.2: Labels of instructies (niveau A)
• 4.1.2: Naam, rol, waarde (niveau A)

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?

<div for="kleur3">Wat is je lievelingskleur?</div>
<input
  type="text"
  id="kleur3"
  name="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.

Wat is je lievelingskleur? Rood Blauw Wit

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

De zichtbare naam moet overeenkomen met de toegankelijke naam

Gebruikers van voice recognition software kunnen een formulierveld focus geven door de naam uit te spreken.

Als de toegankelijke naam niet begint met de zichtbare naam werkt dit niet goed. Dit kan gebeuren bij het verkeerd gebruik van het attribute aria-label. Met aria-label kan een formulierveld ook een toegankelijke naam worden gegeven, onzichtbaar voor de ziende gebruiker.

Door te zorgen dat de zichtbare naam en toegankelijke naam overeenkomen, voldoe je aan een WCAG-criterium: 2.5.3: Label in naam (Niveau A).

Niet doen: alleen een placeholder gebruiken om te laten zien wat de gebruiker moet invullen, terwijl de onzichtbare toegankelijke naam een hele andere inhoud heeft.

<input
  type="text"
  name="lievelingskleur"
  aria-label="Vul een kleur in"
  placeholder="Wat is je lievelingskleur"
/>

Niet doen: alleen losse tekst gebruiken om te laten zien wat de gebruiker moet invullen, terwijl de onzichtbare toegankelijke naam een hele andere inhoud heeft.

Zoek

<div>Zoek</div>
<input
  type="search"
  name="trefwoord"
  aria-label="Trefwoord"
/>

Zet het label boven het formulierveld

Zet het label boven het formulierveld. Niet ernaast, niet eronder en niet in het formulierveld, maar op de regel boven het formulierveld. Doe dit consequent voor alle formuliervelden. Voor left-to-right talen is het label links uitgelijnd.

Deze plaatsing heeft meerdere voordelen:

• Het biedt voldoende ruimte voor labels van verschillende lengtes. Het kan zijn dat gebruikers vertaalsoftware gebruiken op de pagina, waardoor labels langer of korter kunnen zijn dan je verwacht.
• Dit werkt beter voor gebruikers die de tekst inzoomen.
• Door labels, formuliervelden en acties verticaal uit te lijnen, wordt een natuurlijke 'scan-lijn' gecreëerd. Hierdoor kunnen mensen hun aandacht gemakkelijk op deze lijn richten.

Waarom is dit belangrijk? Mensen lezen van boven naar beneden en verwachten dat de informatie in die volgorde staat.

Je brein verbindt automatisch wat er bij elkaar is geplaatst, dus zorg er ook voordat het label visueel dicht bij het formulierveld staat. Dan is duidelijk wat bij elkaar hoort. Lees hierover mee over bij de richtlijnen over stijl: Ruimte.

Plaats labels buiten het formulierveld en niet daarbinnen. Op deze manier heeft het label altijd een vaste positie en kan het in een leesbare grootte worden getoond.

Gebruik geen zogenaamde “floating labels”. Deze zijn moeilijker te begrijpen. Zie: Material Design Text Fields Are Badly Designed in Smashing Magazine.

Niet doen: het label inconsequent plaatsen in een formulier (visueel en in code).

Wat is je lievelingskleur? Rood Blauw WitWat is je lievelingsdier?

<label for="lievelingskleur">Wat is je lievelingskleur?</label>
<select
  name="lievelingskleur"
  id="lievelingskleur"
>
  <option>Rood</option>
  <option>Blauw</option>
  <option>Wit</option>
</select>
<input
  type="text"
  id="dier"
  name="lievelingsdier"
/>
<label for="dier">Wat is je lievelingsdier?</label>

Zorg ervoor dat het label altijd zichtbaar is

Waarom? Als het label verdwijnt bij het typen kan er verwarring ontstaan: wat moet je ook alweer invullen? Daarom is een placeholder geen goede vervanging van het label.

De placeholder kan ook voor verwarring zorgen bij gebruikers. Is het al veld ingevuld? Zie het onderzoek Placeholders in Form Fields Are Harmful van de Nielsen Norman Group.

Een label vertelt wat je moet invullen en een placeholder hoe je een formulierveld moet invullen. Voor een e-mailveld kan het label bijvoorbeeld “Jouw e-mailadres” zijn en de placeholder “naam@voorbeeld.com”.

De hoe informatie kan ook in een description worden opgenomen, dan blijft deze informatie ook zichtbaar tijdens het invullen.

Een andere reden om een label niet te verbergen is om beter te kunnen controleren of alles goed is ingevuld met autocomplete.

Namen, adressen en telefoonnummers kunnen automatisch vooraf worden ingevuld door de browser. Wanneer het label verborgen is, moet de gebruiker controleren of elke waarde juist is ingevuld bij het goede formulierveld. Dat is veel gemakkelijker als het label altijd zichtbaar is.

Doen: het label blijft zichtbaar, ook als de gebruiker gaat invullen.

Wat is je lievelingsdier?

<label for="dier1">Wat is je lievelingsdier?</label>
<input
  type="text"
  id="dier1"
  name="lievelingsdier"
  placeholder="Bijvoorbeeld cavia"
/>

Niet doen: alleen een placeholder gebruiken als zichtbaar label.

Wat is je lievelingsdier?

<label
  for="dier2"
  class="visually-hidden"
>
  Wat is je lievelingsdier?
</label>
<input
  type="text"
  id="dier2"
  name="lievelingsdier"
  placeholder="Wat is je lievelingsdier?"
/>

Zet alleen tekst in het label

Gebruik alleen tekst in een label. Dus geen links, buttons, tooltips of kopjes.

Dit geeft problemen bij het voorlezen van het label door screenreaders en het activeren via voice recognition.

Zet extra informatie boven het formulier, als links boven het label of formulierveld (wat logisch is qua leesvolgorde) of als beschrijving bij het veld. Vermijd tooltips.

Lees ook de richtlijnen voor links in formulieren.

Doen: de link buiten het label plaatsen.

Onze algemene leveringsvoorwaarden

Ik ga akkoord met de algemene leveringsvoorwaarden

<p><a href="#">Onze algemene leveringsvoorwaarden</a></p>
<input
  id="alv1"
  type="checkbox"
/>
<label for="alv1">Ik ga akkoord met de algemene leveringsvoorwaarden</label>

Niet doen: de link binnen het label plaatsen.

Ik ga akkoord met de algemene leveringsvoorwaarden

<input
  id="alv2"
  type="checkbox"
/>
<label for="alv2">
  Ik ga akkoord met de
  <a href="#">algemene leveringsvoorwaarden</a>
</label>

Gebruik duidelijke labelteksten

Het doel van een label is dat de gebruiker de vraag begrijpt. Een effectief label is duidelijk en beschrijvend. Waar nodig wordt er ook extra hulp geboden worden, zoals een omschrijving van waar een BSN-nummer te vinden is.

Doen: simpel label met extra beschrijving. Gebruik waar nodig een losse description om meer uitleg te geven.

Voornaam (een of meerdere)

Vul de voornaam of voornamen in zoals deze op je id-kaart of paspoort staan.

<label for="first-name">Voornaam (een of meerdere)</label>
<p id="first-name-description">
  Vul de voornaam of voornamen in zoals deze op je id-kaart of paspoort staan.
</p>
<input
  autocomplete="given-name"
  type="text"
  name="first_name"
  id="first-name"
  aria-describedby="first-name-description"
/>

Niet doen: Ingewikkeld label. Door veel informatie in te korten wordt het label onduidelijk

Voornaam(en)

<label for="first-name2">Voornaam(en)</label>
<input
  autocomplete="given-name"
  type="text"
  name="first_name"
  id="first-name2"
/>

Deze richtlijnen worden onderhouden door het NL Design System. Heb je aanvullingen of opmerkingen? Open een issue op GitHub met je suggesties.