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.
<label for="dier1">Wat is je lievelingsdier?</label><input type="text" id="dier1" name="lievelingsdier" placeholder="Bijvoorbeeld cavia"/>
Niet doen
Alleen een placeholder gebruiken als zichtbaar label.
<label for="dier2" class="visually-hidden">Wat is je lievelingsdier?</label><input type="text" id="dier2" name="lievelingsdier" placeholder="Wat is je lievelingsdier?"/>
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? Open een issue op GitHub en deel je mening.