Labels of instructies

Wat het vereist

Wanneer de gebruiker invoer moet verstrekken — een tekstveld, selectievakje, keuzerondje, selectielijst, datumkiezer, bestandskiezer — moet er een label of instructie zijn die de gebruiker vertelt wat er verwacht wordt. Het label kan zichtbare tekst zijn, een <label>-element, een aria-label of aria-labelledby; instructies kunnen het vereiste formaat, toegestane waarden of voorbeelden bevatten.

Verplichte velden, verwachte formaten (“DD/MM/JJJJ”) en speciale beperkingen (“minimaal 8 tekens, gemengde hoofd- en kleine letters”) vallen allemaal onder dit succescriterium.

Hoe hieraan te voldoen

• Koppel aan elk <input>, <textarea> en <select> een <label for="…"> waarvan het for-attribuut overeenkomt met het id van het invoerveld.
• Gebruik placeholdertekst nooit als enige label — placeholders verdwijnen bij focus en hebben een slechte kleurcontrast.
• Geef verplichte velden zichtbaar aan (asterisk, het woord “verplicht” of aria-required="true") en leg de conventie uit nabij de bovenkant van het formulier.
• Vermeld het verwachte formaat vooraf, niet nadat de gebruiker een fout heeft gemaakt: “Datum (DD/MM/JJJJ)” of “Telefoonnummer, bijv. 020-123-4567.”
• Gebruik voor groepen selectievakjes of keuzerondjes <fieldset> en <legend> om de groep te labelen.
• Gebruik voor pictogram-only of filterbalk-invoer aria-label om een betekenisvolle naam te geven.

Veelvoorkomende fouten

• Formulieren waarbij placeholdertekst het enige label is en verdwijnt zodra de gebruiker begint te typen.
• Verplichte velden die alleen zijn gemarkeerd met rode asterisken zonder programmatische koppeling.
• Geboortedatuminvoer die een bepaald formaat verwacht en de gebruiker hierover pas informeert nadat de validatie mislukt.
• Zoekinvoer gelabeld met een vergrootglasfase zonder toegankelijke naam.
• Inlogformulieren waarbij gebruikersnaam- en wachtwoordvelden visueel naast labels staan maar de labels niet programmatisch zijn gekoppeld.

Waarom het belangrijk is

Formulieren zijn de plek waar de meeste gebruikers transacties uitvoeren op een website — aanmelden, afrekenen, contact opnemen, ondersteuning aanvragen, inplannen. Ongelabelde of onvoldoende gelabelde formulieren sluiten schermlezersgebruikers volledig uit, omdat zij niet kunnen zien welke gegevens elk vak vereist. Zij benadelens ook dyslectische gebruikers, die de context kwijtraken zodra een placeholder verdwijnt, en gebruikers met cognitieve beperkingen, die baat hebben bij formaatinstructies vooraf.

Labels zijn ook essentieel voor wachtwoordbeheerders, automatisch invullen en spraakbediening, die allemaal labeltekst gebruiken om velden te koppelen. Een goed gelabeld formulier is gunstig voor iedereen.