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:

• Knoppen: knoppen zijn zelf-labelend
• Verborgen invoervelden: gebruik type="hidden" voor het invoerveld