Labels

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="kleur">Wat is je lievelingskleur</label>
<input
    type="text"
    id="kleur"
    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.

Bijvoorbeeld voor <select>:

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

                
               

Niet doen: Een div in plaats van een label gebruiken. De “for” en “id” koppeling werkt alleen met een label element.

<!-- Dit is foute code, niet kopieren -->
<div for="kleur">Wat is je lievelingskleur</div>
<input
    type="text"
    id="kleur"
    name="lievelingskleur"
/>

                
               

Niet doen: Label zonder gekoppelde input. Door het label element te gebruiken zonderfor mis je de koppeling tussen het label en de input voor mensen die de visuele context niet waarnemen.

<!-- Dit is foute code, niet kopieren -->
<label>Wat is je lievelingskleur</label>
<select
    name="lievelingskleur"
>
    <option>Rood</option>
    <option>Blauw</option>
    <option>Wit</option>
</select>

                
               

Het geven van een goede toegankelijke naam aan formuliervelden is verplicht volgens de volgende WCAG-succescriteria:

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.

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.

<!-- Dit is foute code, niet kopieren -->
<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.

<!-- Dit is foute code, niet kopieren -->
<div>Zoek</div>
<input
    type="search"
    name="trefwoord"
    aria-label="Trefwoord"
/>

                
               

Deze eis is een WCAG succescriterium: 2.5.3: Label in naam (Niveau A).

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.
Het biedt een natuurlijke ‘scan-lijn’.

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

<label>Wat is je lievelingskleur</label>
<select
    name="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>

                
               

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.

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

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

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.

[to-do] Afbeelding (of in HTML)goed/slecht

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

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 dan verborgen is, moet de gebruiker controleren of elke waarde juist is ingevuld bij het goede formulierveld.

Als het label altijd zichtbaar is, is dat veel gemakkelijker.

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. [later link naar tooltips pagina]

Doen: de link buiten het label plaasten en boven het invoerveld dat deze informatie nodig heeft:

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

Niet doen: De link in het label plaasten.

<!-- Dit is foute code, niet kopieren -->
<input id="alv" type="checkbox">
<label for="alv">Ik ga akkoord met de <a href="url">algemene leveringsvoorwaarden</a></label>