Naar de inhoud
Zoeken

Richtlijnen subnavigatie

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.

Code
<p><label for="lievelingskleur1">Wat is je lievelingskleur?</label></p>
<p id="description-kleur1">Vul de naam van een kleur in.</p>
<p>
  <input
    aria-describedby="description-kleur1"
    id="lievelingskleur1"
    name="lievelingskleur"
    type="text"
  />
</p>

Doen

Het label altijd tonen en een placeholder als korte hint gebruiken.

Code
<p><label for="lievelingskleur2">Wat is je lievelingskleur?</label></p>
<p>
  <input
    id="lievelingskleur2"
    type="text"
    name="lievelingskleur"
    placeholder="Vul een kleurnaam in"
  />
</p>

Niet doen

Het label onzichtbaar maken.

Code
<p>
  <label
    class="sr-only"
    for="lievelingskleur3"
  >
    Wat is je lievelingskleur?
  </label>
</p>
<p>
  <input
    id="lievelingskleur3"
    name="lievelingskleur"
    placeholder="Wat is je lievelingskleur?"
    type="text"
  />
</p>

Niet doen

Placeholdertekst heel lang maken zodat een deel uit het formulierveld valt en daardoor onleesbaar wordt. Gebruik in dat geval een description.

Code
<p><label for="lievelingskleur4">Wat is je lievelingskleur?</label></p>
<p>
  <input
    id="lievelingskleur4"
    name="lievelingskleur"
    placeholder="Geef is je lievelingskleur? Bijvoorbeeld rood, wit, geel of blauw."
    type="text"
  />
</p>

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.

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.

Hoofdmenu