HTMLhulp.nl logo
Het gebruik van het -element: waarom labels onmisbaar zijn voor formulieren

Het gebruik van het

Het gebruik van het <label>-element: waarom labels onmisbaar zijn voor formulieren

Formulieren zijn een essentieel onderdeel van websites. Ze worden gebruikt voor contact, bestellingen, aanmeldingen en talloze andere interacties. Toch worden formulieren vaak verkeerd of onvolledig opgebouwd. Een veelgemaakte fout is het overslaan van het <label>-element. Ontwikkelaars gebruiken liever placeholders of laten velden ongedocumenteerd, maar dat gaat ten koste van toegankelijkheid en gebruiksvriendelijkheid. Het <label>-element lijkt klein en simpel, maar speelt een grote rol in de bruikbaarheid van formulieren. In dit artikel ontdek je waarom labels zo belangrijk zijn, hoe je ze correct gebruikt en welke best practices je moet volgen om formulieren gebruiksvriendelijk en toegankelijk te maken.

Wat is het <label>-element?

Het <label>-element wordt in HTML gebruikt om een beschrijving te koppelen aan een formulierveld. Het geeft gebruikers en hulpmiddelen context over wat er in het veld moet worden ingevoerd.

Een basisvoorbeeld:

<label for="email">E-mailadres</label>
<input type="email" id="email" name="email">

Hier geeft het label duidelijk aan dat de gebruiker zijn e-mailadres moet invullen. De for-attributen koppelen het label aan het invoerveld met dezelfde id.

Waarom zijn labels belangrijk?

  1. Toegankelijkheid voor schermlezers
    Gebruikers die afhankelijk zijn van schermlezers horen het label voorgelezen zodra ze het veld selecteren. Zonder label hoort de gebruiker vaak alleen “invoerveld”, wat onvoldoende informatie is.

  2. Klikbaarheid
    Als je op het label klikt, wordt automatisch het bijbehorende invoerveld geselecteerd. Dit maakt formulieren gebruiksvriendelijker, vooral op mobiele apparaten waar tikken nauwkeuriger moet zijn.

  3. Consistentie
    Labels zorgen voor een duidelijke en uniforme manier van communiceren met gebruikers. Iedere gebruiker weet meteen wat er verwacht wordt.

  4. SEO en semantiek
    Een goed opgebouwd formulier is niet alleen toegankelijker, maar wordt ook beter begrepen door zoekmachines en voldoet aan webstandaarden.

Verschillende manieren om labels te gebruiken

Labels gekoppeld met for

De meest gebruikte methode is het label koppelen via het for-attribuut.

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

Dit is overzichtelijk en maakt het formulier goed leesbaar.

Labels die het veld omsluiten

Een alternatief is om het invoerveld direct binnen het label te plaatsen.

<label>
Naam
<input type="text" name="naam">
</label>

Hier is geen for nodig, omdat de koppeling impliciet is. Dit kan handig zijn bij kleine formulieren, maar voor grotere formulieren is de eerste methode meestal overzichtelijker.

Het verschil tussen labels en placeholders

Een veelgemaakte fout is het gebruik van placeholders in plaats van labels.

Slecht voorbeeld:

<input type="email" placeholder="E-mailadres">

Het nadeel hiervan is dat de placeholder verdwijnt zodra de gebruiker begint te typen. Hierdoor kan de gebruiker vergeten wat er in het veld verwacht werd. Bovendien worden placeholders vaak in een lichte kleur weergegeven, wat voor slechtziende gebruikers nauwelijks leesbaar is.

Goed voorbeeld:

<label for="email">E-mailadres</label>
<input type="email" id="email" placeholder="bijvoorbeeld naam@voorbeeld.nl">

Hier geeft het label de duidelijke instructie en is de placeholder slechts een aanvullende hint.

Labels en formuliertoegankelijkheid (WCAG)

De Web Content Accessibility Guidelines (WCAG) stellen dat alle formuliervelden een duidelijk label moeten hebben. Dit geldt niet alleen voor tekstvelden, maar ook voor checkboxes, radiobuttons en dropdowns.

Voorbeeld checkbox:

<input type="checkbox" id="akkoord" name="akkoord">
<label for="akkoord">Ik ga akkoord met de voorwaarden</label>

Voorbeeld radiobuttons:

<p>Kies je favoriete kleur:</p>
<input type="radio" id="rood" name="kleur" value="rood">
<label for="rood">Rood</label>
<input type="radio" id="blauw" name="kleur" value="blauw">
<label for="blauw">Blauw</label>

Hier wordt duidelijk aangegeven wat de keuzes zijn en wordt alles correct voorgelezen door hulpmiddelen.

Labels en ARIA-attributen

In sommige gevallen, bijvoorbeeld bij custom UI-componenten, zijn standaard labels niet genoeg. Dan kun je ARIA-attributen gebruiken zoals aria-label of aria-labelledby.

Voorbeeld met aria-label:

<input type="text" aria-label="Zoekopdracht invoeren">

Voorbeeld met aria-labelledby:

<span id="zoeklabel">Zoekopdracht</span>
<input type="text" aria-labelledby="zoeklabel">

Hoewel dit nuttig kan zijn, moet je labels met <label> altijd de voorkeur geven omdat dit de standaard en meest robuuste methode is.

Styling van labels

Labels moeten duidelijk zichtbaar zijn. Met CSS kun je labels naast, boven of inline bij velden plaatsen.

Voorbeeld: label boven veld

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

Voorbeeld: label naast veld

label {
display: inline-block;
width: 120px;
}

Inline- en floating labels

Moderne formulieren gebruiken vaak zogenaamde floating labels. Hierbij staat het label eerst als placeholder in het veld en schuift het omhoog zodra de gebruiker begint te typen. Dit kan toegankelijk zijn, mits correct geïmplementeerd.

Voorbeeld met CSS:

<div class="input-group">
<input type="text" id="naam" required>
<label for="naam">Naam</label>
</div>
.input-group {
position: relative;
margin-bottom: 20px;
}
.input-group input {
border: 1px solid #ccc;
padding: 10px;
width: 100%;
}
.input-group label {
position: absolute;
top: 10px;
left: 10px;
transition: 0.2s;
color: #888;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
top: -10px;
left: 5px;
font-size: 12px;
color: #00bf63;
}

Hierbij is het wel belangrijk om te testen met schermlezers en toegankelijkheidstools.

Veelgemaakte fouten met labels

  1. Labels helemaal weglaten en alleen placeholders gebruiken.

  2. Labels visueel verbergen zonder alternatief, waardoor schermlezers niets kunnen voorlezen.

  3. Foutieve koppeling tussen for en id.

  4. Meerdere velden dezelfde id geven, waardoor labels verkeerd gekoppeld worden.

  5. Decoratieve iconen gebruiken als vervanging voor tekstuele labels.

Best practices voor het gebruik van labels

  • Gebruik altijd een label voor ieder formulier-element.

  • Koppel labels met het for-attribuut of door velden in het label te nestelen.

  • Gebruik placeholders alleen als aanvulling, niet als vervanging.

  • Zorg voor duidelijke, korte en betekenisvolle labelteksten.

  • Houd rekening met toegankelijkheid door contrast en leesbaarheid te waarborgen.

  • Test formulieren met een toetsenbord en schermlezer om te zien of alles begrijpelijk is.

Het <label>-element is onmisbaar voor goede formulieren. Het maakt formulieren begrijpelijker, toegankelijker en gebruiksvriendelijker. Voor zowel beginnende webbouwers als ervaren ontwikkelaars geldt: labels horen altijd standaard onderdeel te zijn van je formulieropbouw.