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.
Elk formulierveld moet voorzien zijn van een zichtbaar label dat in de code aan dat veld is gekoppeld. Vage plaatshouders verdwijnen tijdens het typen en volstaan niet.
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 -->