Placeholders in een formulier

Een placeholder geeft de gebruiker een korte hint over het verwachte type gegevens dat in het formulierveld moet worden.

Een label vertelt wat je moet invullen en een placeholder vertelt wat voor soort gegevens in een veld wordt verwacht. Voor een e-mailveld kan het label bijvoorbeeld "Jouw e-mailadres" zijn en de placeholder "naam@voorbeeld.com".

Voor de toegankelijkheid en gebruiksvriendelijkheid van een placeholder is het volgende van belang:

Een placeholder is geen vervanger van een label.
Voorkom verwarring bij de gebruiker.
Zorg voor een voldoende kleurcontract voor de placeholdertekst.

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.

Door het permanent goed zichtbaar tonen van het label voldoe je aan het WCAG-succescriterium 3.3.2: Labels of instructies (niveau A). Meer hierover bij de richtlijnen over labels.

Doen

Het label altijd tonen en een description gebruiken als aanvullende informatie.

Wat is je lievelingskleur?

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.

Wat is je lievelingskleur?

<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.

Wat is je lievelingskleur?

<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"
/>

Placeholders en de zoekfunctie

Een gebruikelijke opzet voor een zoekoptie in de header is:

een onzichtbaar label;
de placeholder als zichtbaar label;
rechts naast het formulierveld een submitbutton met de tekst "Zoek" en/of een icoontje van een loopje.

Hierbij wordt het zoekloopje als zichtbaar label gebruikt over wat in te vullen als de placeholder verdwijnt. Omdat dit een veel gebruikte constructie is, is dit prima. Het is door buttontekst of icoon voldoende duidelijk wat er wordt verwacht.

Doen

De placeholder samen met tekst van de submitknop gebruiken zichtbaar label in een kort zoekformulier.

<label
  class="sr-only"
  for="header-search"
>
  Zoek
</label>
<input
  id="header-search"
  placeholder="Zoek"
  type="search"
/>
<button>Zoek</button>

Voorkom verwarring bij de gebruiker

De placeholder kan ook voor verwarring zorgen bij gebruikers. Is het een veld al ingevuld? De combinatie van een label met een description is een betere manier om de gebruiker te vertellen hoe een veld in te vullen. Herhaal nooit de labeltekst in de placeholder, dat geeft geen extra informatie en is dus zinloos.

Zie het onderzoek Placeholders in Form Fields Are Harmful van de Nielsen Norman Group en The problem with placeholders and what to do instead van Adam Silver.

Doen

Geen placeholder gebruiken als het label duidelijk genoeg is.

Je voornaam

<label for="voornaam1">Je voornaam</label>
<input
  autocomplete="given-name"
  id="voornaam1"
  name="voornaam"
  type="text"
/>

Niet doen

De labeltekst herhalen in de placeholder

Voornaam

<label for="voornaam2">Voornaam</label>
<input
  autocomplete="given-name"
  id="voornaam2"
  name="voornaam"
  placeholder="Voornaam"
  type="text"
/>

Zorg voor een goed kleurcontrast van de placeholdertekst

Kleurcontrast voor tekst ten opzichte van de achtergrond moet voldoen aan WCAG, dit geldt ook voor placeholders.

Sommige browsers zoals Firefox maken placeholdertekst standaard doorzichtiger. Voeg daarom in de CSS opacity: 1 toe voor de placeholder.

::placeholder {
    opacity: 1;
    color: #757575;
}

Zie ::placeholder - CSS: Cascading Style Sheets, op MDN.

Tip: De lichtste kleur grijs die je kunt gebruiken ten opzichte van een witte achtergrond is #757575 of rgb( 117, 117, 117).

Wanneer je zorgt voor voldoende kleurcontrast tussen placeholder en achtergrond, voldoe je aan het WCAG-succescriterium: Contrast (minimum) (niveau AA).

Doen

De placeholder opacity: 1 meegeven in de CSS.

Welk auto rij je?

<label for="auto">Welk auto rij je?</label>
<input
  class="nlds-opacity"
  id="auto"
  name="merk"
  type="text"
  placeholder="Vul een merknaam in"
/>