3.3.2 Labels of instructies

Succescriterium 3.3.2 Labels of instructies

Als de content gebruikersinvoer vereist, dan worden labels of instructies geleverd.

Labels of instructies begrijpen (Engelstalig)

Bij elk formulierelement moet zichtbaar zijn wat je moet invullen of kiezen. Dat doe je met een label, een instructie of allebei. Deze moeten zichtbaar zijn voor álle gebruikers.

Denk aan een veld waar je je naam invult. Het woord “Naam” boven het veld is het label. Soms is een label niet genoeg. Geef dan ook een instructie, bijvoorbeeld:

dat een veld verplicht is
in welk formaat je iets invult, zoals een datum als dd-mm-jjjj
welke regels gelden, zoals de eisen aan een wachtwoord

Geef niet meer uitleg dan nodig. (Te veel instructies maken een formulier net zo lastig als te weinig!)

Een placeholdertekst alleen is niet genoeg als label. Die tekst verdwijnt zodra je begint te typen.

Info

Dit succescriterium kijkt alleen of er een zichtbaar label of een zichtbare instructie is. Of het label goed in de code aan het formulierelement is gekoppeld, valt onder 1.3.1 Info en relaties. Of een formulier element een naam heeft, valt onder 4.1.2 Naam, rol, waarde. Of het label duidelijk genoeg is, valt onder 2.4.6 Koppen en labels.

Hoe pas je dit toe?

Labels

Geef elk formulierelement een zichtbaar label.
Vormen keuzerondjes of selectievakjes samen één vraag? Zet de vraag zichtbaar boven de groep, zoals “Wil je de nieuwsbrief ontvangen?” boven “Ja” en “Nee”).
Gebruik geen placeholdertekst als enig label.

Instructies

Zorg voor zichtbare instructies bij verplichte formulierelementen of formulierelementen met een verplicht invoerformaat.
Zet regels voor de invoer bij het veld (zoals de eisen aan een wachtwoord).

Lees het artikel over toegankelijke formulieren

Voor wie is dit belangrijk?

Mensen die een schermlezer gebruiken.
Mensen die blind of slechtziend zijn.
Mensen die een cognitieve, taal- of leerbeperking hebben.

Wie is verantwoordelijk?

Hoe toets je dit?

Uitzonderingen

Geen uitzonderingen

Geldt alleen voor:

content die gebruikersinvoer vereist

Testprocedure

Test 1: Labels

Inventariseer de pagina
- Bepaal welke formulierelementen er zijn:
  - Invoervelden
  - Tekstgebieden
  - Keuzelijsten
  - Selectievakjes
  - Keuzerondjes
  - Schuifregelaars
  - Maatwerk formulierelementen
- Bepaal welke formulierelementen samen één gegeven vormen (bijvoorbeeld dag, maand en jaar bij een geboortedatum)
- Bepaal welke formulierelementen samen één vraag vormen
- Bepaal voor elke groep die samen één vraag vormt of de losse labels aangeven waar de vraag over gaat
- Bepaal welke invoervelden en tekstgebieden een tekst in het formulierelement hebben (bijvoorbeeld een placeholdertekst)
Controleer voor elk formulierelement of minstens één van de volgende waar is:
- Of er een zichtbaar label bij het formulierelement staat
- Of er een zichtbare instructie bij het formulierelement staat die aangeeft wat er ingevuld of gekozen moet worden
- Of er bij een invoerveld, tekstgebied of keuzelijst direct naast het formulierelement een knop staat met een tekst of icoon die het doel van het formulierelement aangeeft (bijvoorbeeld “Zoeken”, een vergrootglas of een verzendicoon)
Controleer voor formulierelementen die samen één gegeven vormen of minstens één van de volgende waar is:
- Of elk formulierelement een eigen zichtbaar label of een eigen zichtbare instructie heeft (bijvoorbeeld “Dag”, “Maand” en “Jaar”)
- Of er een zichtbaar groepslabel is en een zichtbare instructie of de opmaak duidelijk maakt wat er in elk formulierelement hoort (bijvoorbeeld “dd-mm-jjjj” onder het groepslabel “Geboortedatum”)
Controleer voor elk zichtbaar label:
- Of het label visueel bij het juiste formulierelement hoort
Controleer voor groepen waarvan de losse labels niet aangeven waar de vraag over gaat:
- Of er een zichtbaar groepslabel is
Vul elk invoerveld en tekstgebied met een tekst in het formulierelement in en controleer:
- Of er na het invullen nog een zichtbaar label, een zichtbare instructie of een knop is die aangeeft wat er ingevuld moet worden

Test 2: Instructies

Verken de pagina
- Probeer elk formulier te versturen zonder invoer
- Probeer elk formulier te versturen met invoer in een afwijkend formaat (bijvoorbeeld een datum als 1-1-2026)
- Bepaal welke formulierelementen verplicht zijn
- Bepaal welke formulierelementen een verplicht invoerformaat of andere invoerregels hebben (bijvoorbeeld eisen aan een wachtwoord)
- Bepaal bij welke formulierelementen een instructie in het formulierelement staat (bijvoorbeeld een placeholdertekst)
Controleer voor elk verplicht formulierelement of minstens één van de volgende waar is:
- Of het label of groepslabel met tekst aangeeft dat het formulierelement verplicht is (bijvoorbeeld “(verplicht)”)
- Of het label of groepslabel een symbool voor verplicht bevat waarvan de betekenis vóór het eerste gebruik op de pagina staat (bijvoorbeeld *)
- Of er bij het formulierelement een zichtbare instructie staat dat het verplicht is
- Of er aan het begin van het formulier een zichtbare instructie staat die aangeeft welke formulierelementen verplicht zijn (bijvoorbeeld “Alle velden zijn verplicht”)
- Of de niet-verplichte formulierelementen zijn gemarkeerd als optioneel (bijvoorbeeld met “(optioneel)” in het label)
- Of een foutmelding na het versturen aangeeft welke verplichte formulierelementen niet zijn ingevuld
Controleer voor elk formulierelement met een verplicht invoerformaat of andere invoerregels of minstens één van de volgende waar is:
- Of het label het invoerformaat of de invoerregels noemt
- Of er bij het formulierelement een zichtbare instructie staat met het invoerformaat of de invoerregels
- Of er aan het begin van het formulier een zichtbare instructie staat met het invoerformaat of de invoerregels
Controleer voor formulierelementen met een instructie in het formulierelement:
- Of de instructie na het invullen nog zichtbaar is
Zoek in de code naar instructies bij verplichte formulierelementen en formulierelementen met een verplicht invoerformaat of andere invoerregels die nog geen zichtbare aanduiding hebben (bijvoorbeeld via aria-describedby of in een visueel verborgen element) en controleer:
- Of de instructie zichtbaar wordt als het formulierelement de focus krijgt

Belangrijk om te weten

De koppeling in de code tussen een label en een formulierelement valt onder 1.3.1 Info en relaties.
Een toegankelijke naam via aria-label of title telt niet als zichtbaar label. Die naam valt onder 4.1.2 Naam, rol, waarde.
De eis dat een placeholdertekst niet telt als label of instructie, staat niet letterlijk in WCAG. De eis volgt uit het doel van een label en een instructie: die moeten ook tijdens en na het invullen beschikbaar zijn. Een placeholdertekst verdwijnt zodra er iets wordt ingevuld.
Een zichtbaar groepslabel alleen is niet genoeg als niet duidelijk is wat er in elk formulierelement hoort. Bijvoorbeeld twee invoervelden onder het groepslabel “Naam”: dan is niet duidelijk waar de voornaam en waar de achternaam hoort.
Verschijnt een instructie over verplicht invullen, het invoerformaat of andere invoerregels pas als het formulierelement de focus krijgt? Dan telt die instructie als zichtbaar.
Of een label duidelijk is, valt onder 2.4.6 Koppen en labels.

Beoordeling

Voor alle formulierelementen moet minstens één van de volgende zaken gelden:
- Er staat een zichtbaar label bij het formulierelement
- Er staat een zichtbare instructie bij het formulierelement die aangeeft wat er ingevuld of gekozen moet worden
- Alleen bij invoervelden, tekstgebieden en keuzelijsten: er staat direct naast het formulierelement een knop met een tekst of icoon die het doel van het formulierelement aangeeft
Een label of instructie mag niet alleen als placeholdertekst in het formulierelement staan
Voor alle formulierelementen die samen één gegeven vormen, moet minstens één van de volgende zaken gelden:
- Elk formulierelement heeft een eigen zichtbaar label of een eigen zichtbare instructie
- Er is een zichtbaar groepslabel en een zichtbare instructie of de opmaak maakt duidelijk wat er in elk formulierelement hoort
Een zichtbaar label moet visueel bij het juiste formulierelement horen
Bij formulierelementen die samen één vraag vormen en waarvan de losse labels niet aangeven waar de vraag over gaat, moet er een zichtbaar groepslabel zijn
Voor alle verplichte formulierelementen moet minstens één van de volgende zaken gelden:
- Het label of groepslabel geeft met tekst aan dat het formulierelement verplicht is
- Het label of groepslabel bevat een symbool voor verplicht, waarvan de betekenis vóór het eerste gebruik op de pagina staat
- Een instructie bij het formulierelement geeft aan dat het verplicht is en is zichtbaar, op zijn laatst als het formulierelement de focus krijgt
- Een zichtbare instructie aan het begin van het formulier geeft aan welke formulierelementen verplicht zijn
- De niet-verplichte formulierelementen zijn gemarkeerd als optioneel
- Een foutmelding na het versturen geeft aan welke verplichte formulierelementen niet zijn ingevuld
Voor alle formulierelementen met een verplicht invoerformaat of andere invoerregels moet minstens één van de volgende zaken gelden:
- Het label noemt het invoerformaat of de invoerregels
- Een instructie bij het formulierelement noemt het invoerformaat of de invoerregels en is zichtbaar, op zijn laatst als het formulierelement de focus krijgt
- Een zichtbare instructie aan het begin van het formulier noemt het invoerformaat of de invoerregels

Bronnen

Andere richtlijnen

Richtlijnen voor toegankelijkheid van webcontent