3.3.2 Labels of instructies – Richtlijnen voor toegankelijkheid van webcontent

Bij elk invoerveld moet je duidelijk maken wat de gebruiker moet invullen. Dit doe je door een duidelijk en zichtbare label of instructie toe te voegen. Deze moeten zichtbaar zijn voor álle gebruikers.

Denk aan een formulier waar je je naam invult: het woord “Naam” boven of naast het veld is het label. Bij complexe velden geef je extra instructies zoals:

of het een verplicht veld is
of een specifiek formaat moet worden gebruikt
het bereik waar een invoer tussen moet vallen

Het gaat erom dat iedereen begrijpt welke informatie je van hen verwacht.

Let op: Dit succescriterium controleert alleen of er een zichtbare tekst of herkenbaar icoon aanwezig is. Een placeholder-tekst alleen is niet genoeg. De tekst verdwijnt zodra iemand begint te typen.

Hoe pas je dit toe?

Labels

Zorg voor zichtbare labels bij formulierelementen.

Instructies

Zorg voor zichtbare instructies bij verplichte formulierelementen.
Zorg voor zichtbare instructies bij formulierelementen met een verplicht invoerformaat.

Lees het artikel over toegankelijke formulieren

Handige tips

Plaats het label op een logische plek: links van of boven het veld.
Zorg dat de labels en instructies beschikbaar zijn voordat de gebruiker het veld invult.

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?

Redacteur
Vormgever
Ontwikkelaar

Hoe toets je dit?

Testprocedure

Test 1: Labels

Inventariseer de pagina
- Bepaal welke formulierelementen er zijn:
  - Invoervelden
  - Tekstgebieden
  - Keuzerondjes
  - Selectievakjes
  - Keuzelijsten
  - Knoppen
Controleer voor elk formulierelement:
- Of er een zichtbaar label aanwezig is
- Of het label duidelijk bij het element hoort
Controleer voor keuzelijsten:
- Of de eerste optie dienst doet als label
- Of de eerste optie geen selecteerbare waarde is
Controleer voor gegroepeerde formulierelementen:
- Of de groep gezamenlijk een zichtbaar label heeft
- Of het duidelijk is waar de groep voor dient
Controleer voor zoekvelden zonder zichtbaar label:
- Of er een knop bij het veld staat met herkenbare tekst of icoon:
  - Knop met tekst “Zoeken” (of iets dergelijks)
  - Vergrootglasicoon met tekstalternatief
- Of het doel van het veld duidelijk is uit de context
Controleer voor chat- of berichtenvelden zonder zichtbaar label:
- Of er een knop bij het veld staat met herkenbare tekst of icoon:
  - Knop met tekst “Versturen” of “Verzenden”
  - Vliegtuigicoon
  - Pijlicoon
- Of het doel van het veld duidelijk is uit de context

Test 2: Instructies

Inventariseer de pagina
- Bepaal welke formulierelementen er zijn:
  - Invoervelden
  - Tekstgebieden
  - Keuzerondjes
  - Selectievakjes
  - Keuzelijsten
  - Knoppen
Controleer voor elk formulierelement:
- Of er een zichtbare instructie aanwezig is
- Of de instructie duidelijk bij het element hoort
Controleer voor verplichte velden:
- Of verplichte velden zijn gemarkeerd met tekst of een symbool:
  - Tekst “(verplicht)”
  - Of tekst “(optioneel)” bij alle niet-verplichte velden
  - Of symbool “*”
Controleer voor velden met een specifiek invoerformaat:
- Of het invoerformaat vóór het invoerveld staat beschreven
- Of het invoerformaat in de tekst in het placeholder-attribuut staat

Beoordeling

Formulierelementen moeten een zichtbaar label hebben
Gegroepeerde formulierelementen moeten een gezamenlijk zichtbaar label hebben
Formulierelementen moeten niet een placeholdertekst gebruiken als zichtbaar label

Aanvullende instructies moeten zichtbaar zijn
Verplicht velden moeten gemarkeerd zijn in het label, met instructies bij het veld, met instructies op formulierniveau of een foutmelding

Bronnen

Andere richtlijnen

Richtlijnen voor toegankelijkheid van webcontent