Labels op je formuliervelden: waarom een placeholder niet genoeg is
Het grijze woord in het veld dat verdwijnt zodra je typt, is geen label. Het is een hint, en hij is precies weg op het moment dat je hem nodig hebt.
Wat we vinden
Bij 28 van de 70 gemeten shops ontbrak minstens één label, op 237 plekken. Keuzelijsten zonder naam kwamen bij 22 shops voor. Het zwaarst weegt waar het staat: bij 36 van de 70 shops vonden we kritieke fouten in de winkelwagen of op de afrekenpagina.
Waarom een placeholder faalt
- Hij verdwijnt zodra je typt. Kom je halverwege terug, dan weet je niet meer welk veld dit was.
- Hij is meestal lichtgrijs, en haalt het vereiste contrast niet.
- Sommige schermlezers lezen hem voor, andere niet. Je weet niet wat je klant hoort.
- Automatisch invullen werkt slechter, want de browser heeft minder aanknopingspunten.
Hoe het wel moet
Een zichtbaar label boven of naast het veld, gekoppeld met for en
id:
<label for="postcode">Postcode</label> <input id="postcode" name="postcode" autocomplete="postal-code">
Kan het label echt niet zichtbaar zijn — een zoekveld met een vergrootglasknop ernaast — geef
het veld dan een aria-label. Een hint mag erbij, gekoppeld met
aria-describedby, zodat hij wordt voorgelezen ná het label.
Velden die bij elkaar horen
Bij keuzerondjes (bezorgen of afhalen, betaalmethode) hoort de vraag zelf ook een naam te
hebben. Zet ze in een fieldset met een legend. Zonder dat hoort iemand
alleen "iDEAL, keuzerondje", zonder de vraag waar het antwoord bij hoort.
Waarom dit geld kost
Dit is niet alleen een toegankelijkheidsprobleem. Een veld waarvan je halverwege niet meer weet wat het was, wordt verkeerd ingevuld, en een verkeerd ingevuld adres is een retourzending. De afrekenpagina is de duurste plek van je shop om fouten te hebben.
Bronnen
- Eigen meting bij 70 Nederlandse webshops, 14 september 2026: label bij 28 shops (237 plekken), select-name bij 22 shops
- WCAG 2.1, succescriteria 1.3.1 Info en relaties, 3.3.2 Labels of instructies, 4.1.2 Naam, rol, waarde