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 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
  - Keuzerondjes
  - Selectievakjes
  - Schuifregelaars
  - Maatwerk formulierelementen
- Bepaal welke formulierelementen samen één vraag vormen
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
- Alleen bij invoervelden en tekstgebieden: Of er 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 elk zichtbaar label:
- Of het label visueel bij het juiste formulierelement hoort
Vul elk invoerveld, tekstgebied en elke keuzelijst in en controleer:
- Of het label in beeld blijft
Controleer voor formulierelementen die samen één vraag vormen:
- Bij een groep waarvan de losse labels niet aangeven waar de vraag over gaat:
  - Of er een zichtbaar groepslabel is

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)
Controleer voor elk verplicht formulierelement of minstens één van de volgende waar is:
- Of het label met tekst aangeeft dat het formulierelement verplicht is (bijvoorbeeld “(verplicht)”)
- Of het label 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 op formulierniveau 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 de foutmelding na het versturen aangeeft dat het formulierelement verplicht is
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 op formulierniveau een zichtbare instructie staat met het invoerformaat of de invoerregels
- Of de placeholdertekst het invoerformaat noemt
Zoek in de code naar instructies bij formulierelementen (bijvoorbeeld via aria-describedby of in een visueel verborgen element) en controleer:
- Of elke instructie zichtbaar is als het formulierelement de focus krijgt

Belangrijk om te weten

De koppeling in de code tussen label en formulierelement valt onder 1.3.1 Info en relaties.
Een toegankelijke naam via aria-label of title telt niet als zichtbaar label.
Of een label duidelijk en beschrijvend is, valt onder 2.4.6 Koppen en labels.
Het tekstalternatief van een icoon dat als label dient, valt onder 1.1.1 Niet-tekstuele content.
Een instructie die pas verschijnt als het formulierelement de focus krijgt, telt als zichtbaar.

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 en tekstgebieden: er staat direct naast het formulierelement een knop met een tekst of icoon die het doel van het formulierelement aangeeft
Een zichtbaar label moet visueel bij het juiste formulierelement horen
Het label moet zichtbaar blijven nadat het formulierelement is ingevuld
Bij groepen van gerelateerde formulierelementen waarvan de losse labels onvoldoende context geven, moet er een zichtbaar groepslabel zijn
Voor alle verplichte formulierelementen moet minstens één van de volgende zaken gelden:
- Het label geeft met tekst aan dat het formulierelement verplicht is
- Het label bevat een symbool voor verplicht, waarvan de betekenis vóór het eerste gebruik op de pagina staat
- Een zichtbare instructie bij het formulierelement geeft aan dat het verplicht is
- Een zichtbare instructie op formulierniveau geeft aan welke formulierelementen verplicht zijn
- De niet-verplichte formulierelementen zijn gemarkeerd als optioneel
- De foutmelding na het versturen geeft aan dat het formulierelement verplicht is
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 zichtbare instructie bij het formulierelement noemt het invoerformaat of de invoerregels
- Een zichtbare instructie op formulierniveau noemt het invoerformaat of de invoerregels
- De placeholdertekst noemt het invoerformaat
Instructies bij formulierelementen moeten zichtbaar zijn, uiterlijk als het formulierelement de focus krijgt

Bronnen

Andere richtlijnen

Richtlijnen voor toegankelijkheid van webcontent