Formulierlabel
Elk invoerveld heeft een zichtbaar, programmatisch gekoppeld label nodig. Placeholder-tekst is geen label. Ontbrekende formulierlabels treffen 49% van de homepagina's — de op één na meest voorkomende WCAG-fout na contrast.
Every form field needs a visible label that's linked to it in code. Faint placeholder text vanishes as you type and isn't enough.
WCAG 1.3.1 (Niveau A) en 3.3.2 (Niveau A) vereisen zichtbare labels die programmatisch zijn gekoppeld aan hun invoervelden. Het
Placeholder-tekst faalt als label omdat: het verdwijnt bij focus, het doorgaans onvoldoende contrast heeft, het niet betrouwbaar wordt aangekondigd door alle schermlezer/browser-combinaties, en het context verwijdert terwijl de gebruiker typt.
Waarom dit belangrijk is
Ontbrekende formulierlabels treffen 49% van de homepagina's — de op één na meest voorkomende WCAG-fout na contrast. Zonder een programmatisch gekoppeld label kondigen schermlezers invoervelden aan als alleen "tekstveld bewerken" zonder indicatie wat in te voeren. Placeholder-tekst verdwijnt bij focus en wordt niet door alle schermlezers aangekondigd.
Hoe te detecteren
Klik op de labeltekst — ontvangt het invoerveld focus? (Zo ja, het label is gekoppeld.) Voer axe of WAVE uit om invoervelden zonder labels te vinden. Controleer dat placeholder-tekst niet als enig label wordt gebruikt.
Hoe op te lossen
<!-- Explicit label association --> <label for="email">Email address</label> <input id="email" type="email" /> <!-- Implicit wrapping (also valid) --> <label> Email address <input type="email" /> </label> <!-- Icon-only input needs aria-label --> <input type="search" aria-label="Search products" /> <!-- Placeholder is NOT a label --> <input placeholder="Email" /> <!-- ✗ no accessible name -->