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.
Voorbeelden
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"/>
Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
- Succescriterium 1.3.1 Info en relaties
- Succescriterium 1.4.10 Reflow
- Succescriterium 2.4.6 Koppen en labels
- Succescriterium 3.3.2 Labels of instructies
- Succescriterium 4.1.2 Naam, rol, waarde
Over deze richtlijnen
Deze richtlijnen worden onderhouden door 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.