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.
Doen
Het label altijd tonen en een placeholder als korte hint gebruiken.
Niet doen
Het label onzichtbaar maken.
Niet doen
Placeholdertekst heel lang maken zodat een deel uit het formulierveld valt en daardoor onleesbaar wordt. Gebruik in dat geval een description.
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.