Ga naar hoofdinhoud

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 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.

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.

Zorgen dat de zichtbare naam en toegankelijke naam overeenkomen, is nodig om te voldoen WCAG-succescriterium: 2.5.3: Label in naam (niveau A).

Doen

Het zichtbare label is de toegankelijke naam.

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.

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

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).

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.

Niet doen

Alleen een placeholder gebruiken als zichtbaar label.

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.

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.

Wanneer je een afkorting gebruikt, of je moet jargon gebruiken omdat de officiële term verplicht is, geef dan in de beschrijving een voorbeeld of uitleg.

Doen

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

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

Niet doen

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

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.