Form <input> elementen vereisen een label

Hoe het probleem op te lossen?

<input> elementen hebben een label nodig om een formulier toegankelijk te maken. Schermlezers gebruiken het label om het invoerveld aan te kondigen.

Gebruik een van de volgende oplossingen:

Optie 1: Label-element (meest voorkomende optie)

<label for="firstname">Voornaam: </label> 
<input id='firstname' type='text'>

Opmerking: het for-attribuut bevat de id van het <input> veld!

Optie 2: Wrap het invoerveld in een label-element

<label>Voornaam: 
    <input type='text'>
</label>

Optie 3: Gebruik aria-label

<input aria-label="Voornaam" type='text'>

Optie 4: Gebruik aria-labelledby

<p id="firstname">Voornaam:</p>
<input aria-labelledby="firstname" type='text'>

Er zijn enkele uitzonderingen waar geen (expliciet) label nodig is:

• Buttons: <button>-elementen met zichtbare tekst zijn zelf-labelend
• Verborgen invoervelden: gebruik type="hidden" voor het invoerveld

Waarom is dit belangrijk?

Gebruikers van schermlezers zijn afhankelijk van labels om te begrijpen wat elk formulierveld vraagt. Zonder label hoort een gebruiker die via de tabtoets navigeert alleen het invoertype, zoals ‘invoerveld’. Er is dan geen context over wat zij moeten invullen.

Labels zijn ook voordelig voor gebruikers met cognitieve beperkingen doordat het doel van elk veld expliciet is. Klikbare labels vergroten bovendien het tik- en klikoppervlak op mobiele apparaten.