Een placeholder is geen vervanger van een label
De gebruiker moet altijd een zichtbare indicatie hebben over wat in te vullen. Ook tijdens het typen, wanneer de placeholder verdwijnt of als de informatie al automatisch is ingevuld.
Gebruik dus niet enkel de placeholder om aan te geven wat een gebruiker moet invullen.
Een ander probleem met placeholders is dat bij inzoomen lange tekst te groot kan worden voor het formulierveld en daardoor afhakt en onleesbaar wordt.
Het permanent goed zichtbaar tonen van het label is nodig om te voldoen aan het WCAG-succescriterium 3.3.2 Labels of instructies (niveau A). Meer hierover bij de richtlijn Zorg ervoor dat het label altijd zichtbaar is.
Doen
Het label altijd tonen en een description gebruiken als aanvullende informatie.
Vul de naam van een kleur in.
<label for="lievelingskleur1">Wat is je lievelingskleur?</label><p id="description-kleur1">Vul de naam van een kleur in.</p><input aria-describedby="description-kleur1" id="lievelingskleur1" name="lievelingskleur" type="text"/>
Doen
Het label altijd tonen en een placeholder als korte hint gebruiken.
<label for="lievelingskleur2">Wat is je lievelingskleur?</label><input id="lievelingskleur2" type="text" name="lievelingskleur" placeholder="Vul een kleurnaam in"/>
Niet doen
Het label onzichtbaar maken.
<label class="sr-only" for="lievelingskleur3">Wat is je lievelingskleur?</label><input id="lievelingskleur3" name="lievelingskleur" placeholder="Wat is je lievelingskleur?" type="text"/>
Niet doen
Placeholdertekst heel lang maken zodat een deel uit het formulierveld valt en daardoor onleesbaar wordt. Gebruik in dat geval een description.
<label for="lievelingskleur4">Wat is je lievelingskleur?</label><input id="lievelingskleur4" name="lievelingskleur" placeholder="Geef is je lievelingskleur? Bijvoorbeeld rood, wit, geel of blauw." type="text"/>
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? Deel je mening op GitHub met je suggesties.