Ga naar hoofdinhoud

WCAG-succescriterium 3.3.2 Labels of instructies

Niveau A

Een bezoeker die een formulier invult, ziet bij elk veld een permanent zichtbaar label dat beschrijft wat er wordt verwacht. Bijvoorbeeld: "Voornaam", "E-mailadres", "Postcode". Dit label mag ook een icoontje zijn. Waar het invoerformaat niet vanzelfsprekend is, staat er een instructie bij. Zo weet de bezoeker wat er moet worden ingevuld voordat er een fout ontstaat.

Labels zijn permanent zichtbaar en blijven zichtbaar terwijl de bezoeker het veld invult. Een screenreader leest het label of de alt-tekst van een icoon zodra het veld focus krijgt. Instructies staan bij het veld en niet alleen in een inleidende tekst bovenaan het formulier.

Veelgemaakte fouten

Invoerveld heeft geen zichtbaar label

Elk invoerveld heeft een zichtbaar label dat beschrijft wat er moet worden ingevuld. Een veld zonder label dwingt de bezoeker om uit de context te raden wat er wordt verwacht. Een screenreader leest alleen "invoerveld" voor zonder verdere informatie.

Hoe te testen: bekijk het formulier. Heeft elk veld een zichtbaar label?

Niet doen

Invoerveld zonder zichtbaar label

Doen

Invoerveld met een zichtbaar en gekoppeld label


Wie kan dit oplossen: een developer voegt een <label>-element toe dat via for en id is gekoppeld aan het invoerveld.

Label is alleen beschikbaar voor screenreaders

Een invoerveld heeft een aria-label of een visueel verborgen <label>, maar geen zichtbaar label op het scherm. Een screenreader leest het label voor, maar een ziende bezoeker ziet niet wat er in het veld moet worden ingevuld. Dit succescriterium vereist dat labels zichtbaar zijn voor iedereen, niet alleen voor hulpsoftware.

Hoe te testen: bekijk het formulier zonder hulpsoftware. Heeft elk veld een zichtbaar label? Inspecteer de velden in de DevTools: staat het label in een aria-label of in een element met class="sr-only" of vergelijkbare visueel verborgen CSS?

Niet doen

Label alleen beschikbaar via aria-label

<input type="text" aria-label="Zoekterm" placeholder="Zoeken..." />

Niet doen

Label visueel verborgen met sr-only

<label for="zoek" class="sr-only">
  Zoekterm
</label>
<input type="text" id="zoek" placeholder="Zoeken..." />

Doen

Zichtbaar label voor iedereen

<label for="zoek">Zoekterm</label>
<input type="text" id="zoek" />

Wie kan dit oplossen: een developer vervangt het verborgen label door een zichtbaar label. Een designer maakt ruimte in het ontwerp voor zichtbare labels.

Placeholder wordt gebruikt als label

Een placeholder verdwijnt zodra de bezoeker begint te typen. De bezoeker weet dan niet meer wat er in het veld moet worden ingevuld. Placeholders zijn niet bedoeld als vervanging van een label.

Hoe te testen: begin met typen in een veld dat alleen een placeholder heeft. Verdwijnt de placeholder zodra je begint te typen?

Niet doen

Placeholder als enige aanduiding van het veld

Doen

Zichtbaar label met een placeholder als aanvullend voorbeeld




Wie kan dit oplossen: een developer voegt permanent zichtbare labels toe aan de velden. De placeholders kunnen blijven staan als aanvullend voorbeeld.

Verwacht invoerformaat ontbreekt

Een veld verwacht een specifiek formaat, maar dat staat nergens vermeld. Een datumveld zonder instructie laat de bezoeker raden: is het dd-mm-jjjj of mm/dd/yyyy? Een telefoonnummerveld zonder instructie: met of zonder landcode? Met spaties of aaneengesloten?

Hoe te testen: bekijk elk veld dat een specifiek formaat verwacht. Staat het verwachte formaat bij het veld, als placeholder of als instructietekst?

Niet doen

Datumveld zonder formaatinstructie

<label for="geboortedatum">Geboortedatum</label>
<input type="text" id="geboortedatum" />

Doen

Datumveld met formaatinstructie

<label for="geboortedatum">Geboortedatum</label>
<input type="text" id="geboortedatum" aria-describedby="datum-hint" placeholder="dd-mm-jjjj" />
<p id="datum-hint" class="hint">
  Gebruik het formaat dd-mm-jjjj, bijvoorbeeld 15-03-1990
</p>

De instructie is via aria-describedby gekoppeld aan het veld, zodat een screenreader het voorleest wanneer het veld focus krijgt.

Wie kan dit oplossen: een developer voegt een instructie toe bij het veld en koppelt die via aria-describedby.

Verplichte velden zijn niet gemarkeerd

Een formulier heeft verplichte en optionele velden, maar er is geen aanduiding welke verplicht zijn. De bezoeker ontdekt het pas na het verzenden. Markeer verplichte velden met een zichtbare aanduiding en het required-attribuut of aria-required="true".

Hoe te testen: bekijk het formulier. Kun je voor het invullen zien welke velden verplicht zijn? Is er een legenda die het sterretje of de aanduiding "(verplicht)" verklaart?

Niet doen

Verplicht veld zonder aanduiding


Doen

Verplicht veld met zichtbare aanduiding en required-attribuut


Doen

Verplicht veld met het woord 'verplicht' in het label


Als de meeste velden verplicht zijn, markeer dan de optionele velden met "(optioneel)" in plaats van alle verplichte velden met een sterretje.

Wie kan dit oplossen: een developer voegt de markering toe aan de labels en het required-attribuut aan de velden.

Instructie staat alleen bovenaan het formulier

Een formulier begint met een blok instructietekst dat uitlegt hoe het formulier moet worden ingevuld. Verder in het formulier ontbreken instructies bij de individuele velden. Bij een lang formulier is de bezoeker de instructie vergeten tegen de tijd dat het betreffende veld in beeld komt.

Hoe te testen: scroll door een lang formulier. Zijn de instructies beschikbaar bij de velden waar ze relevant zijn, of moet je terugscrollen naar het begin?

Niet doen

Instructies alleen bovenaan het formulier

<p>Vul alle datums in als dd-mm-jjjj. Telefoonnummers zonder spaties.</p>


<!-- Verderop in het formulier, zonder herhaling: -->
<label for="startdatum">Startdatum</label>
<input type="text" id="startdatum" />


<label for="telefoon">Telefoonnummer</label>
<input type="tel" id="telefoon" />

Doen

Instructies bij de individuele velden

<label for="startdatum">Startdatum</label>
<input type="text" id="startdatum" aria-describedby="startdatum-hint" />
<p id="startdatum-hint" class="hint">Gebruik het formaat dd-mm-jjjj</p>


<label for="telefoon">Telefoonnummer</label>
<input type="tel" id="telefoon" aria-describedby="telefoon-hint" />
<p id="telefoon-hint" class="hint">10 cijfers, zonder spaties</p>

Wie kan dit oplossen: een developer plaatst de instructies bij de velden en koppelt ze via aria-describedby.

Groep invoervelden zonder groepslabel

Een formulier heeft een sectie met adresvelden: straat, huisnummer, postcode, plaats. Visueel is duidelijk dat ze bij elkaar horen, maar in de code ontbreekt een groepslabel. Een screenreader leest de velden los van elkaar voor zonder de context van de groep.

Dit komt ook voor bij betalingsformulieren (kaartnummer, vervaldatum, CVC) en bij persoonlijke gegevens (voornaam, achternaam, geboortedatum).

Hoe te testen: ga met een screenreader door een groep gerelateerde velden. Wordt de groepsnaam voorgelezen bij elk veld?

Niet doen

Adresvelden zonder groepering




Doen

Adresvelden gegroepeerd met fieldset en legend

Factuuradres




Wie kan dit oplossen: een developer groepeert de velden met <fieldset> en <legend>.

Icoon als label is niet duidelijk genoeg

Een label mag een icoon zijn, maar alleen als de betekenis voor iedereen duidelijk is. Een vergrootglas bij een zoekveld of een envelop bij een e-mailveld is herkenbaar. Maar niet elk icoon is vanzelfsprekend. Een trechter-icoon voor filteren, een schuifregelaar-icoon voor voorkeuren of een paperclip voor bijlagen: niet iedere bezoeker begrijpt direct wat zo'n icoon betekent. Het icoon heeft dan een zichtbare tekst nodig om als label te werken.

Daarnaast heeft elk icoon een toegankelijke naam nodig zodat een screenreader het kan voorlezen. Zonder alt-tekst of aria-label leest de screenreader niets voor, of alleen de bestandsnaam van de afbeelding.

Hoe te testen: bekijk het formulier. Heeft elk veld een label dat je direct begrijpt? Herken je de betekenis van elk icoon zonder erover na te denken? Test met een screenreader: wordt er een duidelijke naam voorgelezen bij het veld?

Niet doen

Onduidelijk icoon zonder tekst als label

<!-- Trechter-icoon: betekent dit filteren, sorteren of iets anders? -->
<label for="filter">
  <svg aria-hidden="true"><use href="#icon-funnel" /></svg>
</label>
<select id="filter">
  <option>Alle categorieën</option>
  <option>Elektronisch</option>
  <option>Kleding</option>
</select>

Doen

Icoon met zichtbare tekst als label

<label for="filter">
  <svg aria-hidden="true">
    <use href="#icon-funnel" />
  </svg>
  Filter op categorie
</label>
<select id="filter">
  <option>Alle categorieën</option>
  <option>Elektronisch</option>
  <option>Kleding</option>
</select>

Als er geen ruimte is voor zichtbare tekst naast het icoon, zorg dan dat het icoon zelf een toegankelijke naam heeft via alt-tekst of een <title> in het SVG-element. Maar ook dan geldt: als het icoon onbekend is voor je doelgroep, voeg zichtbare tekst toe.

Wie kan dit oplossen: een designer kiest herkenbare iconen en maakt ruimte voor zichtbare tekst bij iconen die niet vanzelfsprekend zijn. Een developer zorgt dat het icoon een toegankelijke naam heeft.

Hoe te testen

Voor iedereen

  1. Bekijk elk invoerveld in het formulier. Heeft elk veld een zichtbaar label dat beschrijft wat er wordt verwacht?
  2. Controleer of verplichte velden zijn gemarkeerd. Weet je voor het invullen welke velden verplicht zijn?
  3. Controleer velden die een specifiek formaat verwachten. Staat het verwachte formaat bij het veld?
  4. Begin te typen in een veld. Verdwijnt het label? Zo ja, weet je nog wat er wordt verwacht?

Voor developers

  1. Inspecteer elk invoerveld in de DevTools. Heeft elk veld een gekoppeld <label> via for en id? Zoek naar <input>, <select> en <textarea> zonder gekoppeld label.
  2. Controleer of instructies via aria-describedby zijn gekoppeld aan het bijbehorende veld. Navigeer met een screenreader naar het veld en controleer of de instructie wordt voorgelezen.
  3. Controleer of verplichte velden het required-attribuut of aria-required="true" hebben.
  4. Controleer groepen gerelateerde velden. Zijn ze gegroepeerd met <fieldset> en <legend>?
  5. Test labels die in het veld zweven (floating labels) bij 200% en 400% zoom. Blijven ze zichtbaar en leesbaar?
  6. Gebruik axe DevTools of WAVE voor een eerste scan. Ontbrekende labels worden automatisch herkend. Of de labels inhoudelijk duidelijk zijn, controleer je handmatig.

Gerelateerde succescriteria

  • 1.3.1 Info en relaties: labels zijn programmatisch gekoppeld aan hun invoerveld. Lees hier meer als de koppeling tussen label en veld ontbreekt in de code.
  • 3.3.1 Foutidentificatie: duidelijke labels en instructies voorkomen fouten. Als er toch fouten ontstaan, beschrijft de foutmelding wat er mis is.
  • 3.3.3 Foutsuggestie: als het systeem weet hoe een fout gecorrigeerd kan worden, biedt het een suggestie aan. Instructies bij het veld verminderen de noodzaak voor suggesties achteraf.
  • 2.5.3 Label in naam: de zichtbare tekst van een label komt overeen met de toegankelijke naam. Relevant als je aria-label gebruikt dat afwijkt van het zichtbare label.
  • 1.4.3 Contrast (minimum): labels en instructietekst voldoen aan de minimale contrasteis van 4,5:1. Lichtgrijze placeholders halen die eis niet.
  • 1.4.11 Contrast van niet-tekstuele content: een icoon dat als label dient, moet een contrast van minimaal 3:1 hebben ten opzichte van de achtergrond.

Gerelateerde NL Design System-richtlijnen

Relevante bronnen

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

W3C referenties

Belangrijk: De richtlijnen van NL Design System zijn geen wettelijke verplichting

De richtlijnen van NL Design System zijn niet wettelijk verplicht en zijn geen vervanging voor de wettelijk geldende WCAG 2.1 specificatie.

Ons doel is om praktische uitleg en voorbeelden te geven die helpen bij het toegankelijk inzetten van de NL Design System componenten, patronen en richtlijnen. We doen dat op basis van een interpretatie van de nieuwe WCAG 2.2 specificatie.

Weten waar je volgens de wet aan moet voldoen? Ga dan naar wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

Deze pagina's over WCAG worden onderhouden door NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.