Placeholder is geen label

We zien het tegenwoordig meer en meer. Labels bij een formulierveld worden weggelaten en vervangen door een placeholder.

Een placeholder is echter geen volwaardig alternatief voor een label, een label moet steeds zichtbaar bij een formulierveld staan.

Label, value en placeholder?

Even een verduidelijking wat het verschil is tussen een label, value en placeholder.

Label

Een label hoort bij een formulierveld. Het toont aan welke informatie in een invoerveld moet staan.

Een screenreader zal het gelinkte label voorlezen als de cursor in een veld staat. Staat er geen label? Dan kan de screenreader niet voorlezen wat er moet ingevuld worden.

Een muisgebruiker kan klikken op het label om de cursor in het bijhorende veld te plaatsen. Vooral bij radiobuttons en checkboxes is het als muisgebruiker handig om op het label te kunnen klikken, in plaats van op de radiobutton of checkbox.

Hieronder een correct codevoorbeeld om een label te linken aan een input veld, onder het codevoorbeeld staat ook het formulier.

<label for="name">Naam:</label>
<input type="text" id="name"/>

Value

Een value is een attribuut dat kan toegevoegd worden aan een input element.

Hier kan je de waarde van het veld op voorhand definiëren. Met een beetje JavaScript, kan je ervoor zorgen dat deze waarde verdwijnt als de cursor in het veld komt.

<label for="adress">Adres:</label>
<input type="text" id="adress" value="Kunstlaan 24" onfocus="this.value=''"/>

Placeholder

Een placeholder is een attribuut dat eveneens kan toegevoegd worden aan een input element maar niet mag aanzien worden als vervanging voor een label.

De HTML 5 specificatie zegt letterlijk:

The placeholder attribute should not be used as an alternative to a label.

Het kan de gebruiker een hint geven welke data de gebruiker moet invoegen. Als voorbeeld kan je bij een input veld waar een e-mailadres gevraagd wordt, een dummy e-mailadres ingeven in de placeholder.

Zodra je data begint in te voegen in het veld, dan verdwijnt de placeholder.

Zie onderstaand codevoorbeeld en het formulier eronder. Zie je geen e-mailadres in het veld? Dan ondersteunt je browser het HTML 5 placeholder attribuut nog niet.

<label for="e-mail">E-mail:</label>
<input type="text" id="e-mail" placeholder="info@anysurfer.be" />

Waarom blijft een label verplicht?

Een value of placeholder mag steeds toegevoegd worden als extra informatie om de gebruiker hints te geven welke data verwacht wordt. Een placeholder lijkt een alternatief voor een label, maar dat is het zeker niet. Er zijn enkele bedenkingen waarom er altijd een zichtbaar label moet staan. Deze opmerkingen zijn van toepassing op de gewone gebruiker, een screenreader gebruiker maar evengoed iemand met concentratiestoornissen:

• De placeholder tekst verdwijnt als de cursor in het input veld komt. Je moet dus op voorhand de placeholder lezen en hem onthouden om te weten wat je moet invullen.
• Gebruikers die met de tabtoets navigeren tussen invoervelden, moeten terug tabben om de placeholder te zien. Voor je het weet sta je namelijk in een veld waar je niet van weet welke data er verwacht wordt.
• De placeholder tekst heeft standaard een te laag contrastratio van 4.5:1 om goed leesbaar te zijn. Als je het dus gebruikt samen met een label, is het aangeraden via CSS deze standaard kleur aan te passen.

Alternatieven

We zien dat labels vaak vervangen worden door placeholders, bijvoorbeeld om plaats te besparen in een formulier. Wil je toch het placeholder principe gebruiken? Dan kan je Sliding Labels gebruiken om een placeholder te simuleren.

Lees ook

• Reasons why placeholders are problematic
• Don’t Use The Placeholder Attribute (Smashing Magazine)
• Ook de Nielsen Norman group vindt dat Placeholders in Form Fields Are Harmful.