Wat het is
Een correct gecodeerd label is tekst die expliciet is gekoppeld aan een specifiek formulierveld in de onderliggende code van de pagina (meestal via een for-attribuut dat overeenkomt met het id van het veld), zodat een schermlezer dat label aankondigt op het moment dat een bezoeker de focus naar het veld verplaatst — "E-mailadres, tekst bewerken", bijvoorbeeld. Dit is een strengere, technischere vereiste dan simpelweg label-achtige tekst ergens zichtbaar bij het veld te hebben, wat de invalshoek is die wordt behandeld in onze algemene gids over formulierveld-labeling gericht op conversiepercentages.
Een veld kan er voor een ziende bezoeker perfect gelabeld uitzien (tekst die vlak naast het vak staat) terwijl er helemaal geen echte gecodeerde verbinding bestaat tussen die tekst en het veld — en dat is precies het gat waar deze op toegankelijkheid gerichte check naar zoekt.
Waarom het belangrijk is
Een schermlezer ziet de visuele lay-out van een pagina niet — hij leest de onderliggende codestructuur, dus een label dat alleen visueel dicht bij een veld staat maar niet expliciet daaraan gekoppeld is in de code, wordt mogelijk nooit aangekondigd wanneer een schermlezergebruiker dat veld bereikt. Zonder te horen waar een veld voor dient, blijven ze gissen of slaan ze het helemaal over, wat kan betekenen dat een schermlezergebruiker simpelweg geen formulier kan afronden dat een ziende bezoeker volkomen eenvoudig vindt.
Dit is een van de meest gevestigde, specifiek genoemde vereisten in WCAG (de standaard toegankelijkheidsrichtlijnen waar veel organisaties wettelijk aan moeten voldoen), juist omdat formulieren zo centraal staan bij het daadwerkelijk voltooien van een taak op het web — aanmelden, afrekenen, contact opnemen.
Hoe je het oplost
- Voeg voor elk formulierveld een
<label>-element toe met eenfor-attribuut dat exact overeenkomt met hetid-attribuut van dat veld. - Wikkel als alternatief het veld direct in de
<label>-tag zelf, wat dezelfde expliciete verbinding creëert zonder dat overeenkomende ID's nodig zijn. - Gebruik voor een veld dat opzettelijk geen zichtbaar label heeft (bijvoorbeeld een veld met alleen een zoekicoon)
aria-label="Zoeken"rechtstreeks op het veld, zodat een schermlezer alsnog het doel aankondigt. - Vermijd het uitsluitend vertrouwen op placeholdertekst als vervanging voor een echt label — schermlezers behandelen placeholdertekst inconsistent, en hij verdwijnt sowieso zodra er tekst wordt ingevoerd.
- Test door met alleen het toetsenbord en een gratis schermlezer (NVDA, VoiceOver) door je formulier te tabben om te bevestigen dat elk veld een duidelijk doel aankondigt.