Waarom een placeholder geen label is

Het is een populaire ontwerpkeuze: een contactformulier zonder labels boven de velden, alleen lichtgrijze tekst ín de velden. “Naam”. “E-mailadres”. “Uw bericht”. Het oogt rustig en modern. Zodra iemand begint te typen, verdwijnt die grijze tekst. Wie daarna even wordt afgeleid, ziet vier ingevulde velden zonder te weten welk veld wat was. Dit is de kern van het probleem met een placeholder als label: het werkt alleen zolang het veld leeg is. Hieronder de redenen waarom het misgaat en hoe u hetzelfde rustige ontwerp houdt zonder die nadelen.

Wat is het verschil tussen een label en een placeholder?

Een label is de naam van een invoerveld. Het staat er altijd, ook als het veld is ingevuld, en het is in de code aan het veld gekoppeld. Een screenreader leest het voor zodra het veld de focus krijgt. Klikt u op het label, dan komt de cursor in het veld.

Een placeholder is voorbeeldtekst die in een leeg veld staat. Het attribuut is bedoeld als hint, bijvoorbeeld om een formaat te laten zien. Zodra er iets wordt getypt, verdwijnt hij.

<!-- label: blijft staan, gekoppeld aan het veld -->
<label for="naam">Naam</label>
<input id="naam" type="text">

<!-- alleen placeholder: verdwijnt bij typen -->
<input type="text" placeholder="Naam">

Vijf redenen waarom een placeholder tekortschiet

1. Hij verdwijnt

Het meest voor de hand liggende probleem. Wie het formulier controleert voor verzenden, ziet ingevulde waarden zonder naam. Bij een veld als “Naam” is dat nog te raden, bij “Referentienummer” of “Toevoeging” niet. Mensen met geheugen- of concentratieproblemen, en iedereen die tussendoor wordt gestoord, hebben hier het meest last van.

2. Te weinig contrast

Browsers tonen placeholdertekst standaard in lichtgrijs, juist zodat hij er niet uitziet als ingevulde tekst. Die standaardkleur haalt vaak niet het contrast van 4,5:1 dat voor tekst geldt. Maakt u de placeholder donkerder, dan lijkt het veld al ingevuld en slaat de bezoeker het over. Dat dilemma is niet op te lossen zolang de placeholder de enige naam is. Meer over contrast leest u bij kleurcontrast verbeteren.

3. Screenreaders gaan er wisselend mee om

Veel screenreaders lezen een placeholder voor als er geen label is, maar niet allemaal en niet altijd in dezelfde situaties. Een veld met alleen een placeholder kan voor een screenreadergebruiker naamloos zijn. En ook als hij wordt voorgelezen, verdwijnt de naam zodra er iets in het veld staat.

4. Automatisch invullen wist de aanwijzing

Browsers en wachtwoordmanagers vullen velden vaak zelf in. Bij een formulier met alleen placeholders ziet de bezoeker daarna een rij gegevens, zonder te weten of ze in het goede veld staan. Juist bij automatisch invullen wilt u dat de bezoeker kan controleren wat waar staat. Hoe automatisch invullen goed werkt, leest u in autocomplete in formulieren.

5. Het voorbeeld wordt aangezien voor ingevulde tekst

Een placeholder als “jan@voorbeeld.nl” kan bij een vluchtige blik lijken op een veld dat al is ingevuld. Sommige bezoekers slaan het dan over, of proberen de tekst eerst te wissen.

Wat WCAG erover zegt

WCAG noemt placeholders niet met name, maar meerdere criteria raken eraan. Succescriterium 3.3.2, “labels of instructies”, vraagt dat er een label of instructie is wanneer er invoer wordt gevraagd. 1.3.1 vraagt dat de relatie tussen label en veld ook in de code vastligt. En 4.1.2 vraagt dat elk veld een naam heeft die hulpsoftware kan uitlezen. Een placeholder als enige aanwijzing voldoet daar in de praktijk vaak niet aan, of alleen op een kwetsbare manier.

Wat wel werkt

Een zichtbaar label boven het veld

De eenvoudigste en meest betrouwbare oplossing. Het label staat boven het veld, links uitgelijnd, en is gekoppeld met for en id. Op een telefoon past het altijd, en het blijft zichtbaar tijdens het typen.

Hints en voorbeelden onder het label

Wilt u een formaat laten zien, zet het dan als vaste tekst onder het label en koppel het aan het veld:

<label for="iban">IBAN</label>
<p id="iban-hint">Bijvoorbeeld NL91 ABNA 0417 1643 00</p>
<input id="iban" type="text" aria-describedby="iban-hint">

De hint blijft staan, heeft het contrast van gewone tekst en wordt door screenreaders na het label voorgelezen.

Een zwevend label

Wie toch het compacte uiterlijk wil, kan een zwevend label gebruiken: het label staat eerst in het veld en schuift bij focus of invoer klein naar boven. Dat kan toegankelijk, maar alleen als het een echt label-element is, als het ook in de kleine stand genoeg contrast en grootte heeft, en als het niet over de ingevulde tekst heen valt bij inzoomen. In de praktijk is dit lastiger goed te krijgen dan het lijkt. Een gewoon label boven het veld is bijna altijd beter.

Placeholder als aanvulling: mag dat?

Ja. Een placeholder naast een echt label is geen fout. Gebruik hem dan alleen voor iets wat de bezoeker niet per se hoeft te onthouden, en zet belangrijke instructies niet uitsluitend daarin. Veel ontwerpers laten hem in dat geval helemaal weg, omdat het label en een vaste hint al alles zeggen.

Uw eigen formulieren controleren

1. Bekijk elk formulier op uw site: contact, offerteaanvraag, nieuwsbrief, checkout, inloggen. Heeft elk veld een zichtbaar label buiten het veld?
2. Vul een formulier helemaal in. Weet u nog bij elk veld wat er gevraagd werd?
3. Klik op de tekst boven een veld. Komt de cursor in het veld? Dan is het label goed gekoppeld.
4. Draai WAVE of een andere controletool. Velden zonder label verschijnen als fout, vaak met de melding “Missing form label”.

In formulierplugins zoals Contact Form 7, Gravity Forms of WPForms kunt u labels meestal per veld aanzetten. In de nieuwsbriefwidget van een page builder of in het zoekveld van een thema ontbreken ze vaker. Een uitgebreider overzicht van wat een formulier toegankelijk maakt, staat op toegankelijke formulieren. Het bredere plaatje, voorbij formulieren, vindt u op toegankelijkheid voor uw website. En voor wat er gebeurt als het tóch fout gaat bij het invullen: foutmeldingen die mensen echt helpen.