WCAG-succescriterium 3.3.2 Labels of instructies

Niveau A

In het kort

Doel: Gebruikers weten wat ze in moeten voeren.
Wat te doen: Geef een label of uitleg bij invoer.
Waarom het belangrijk is: Iedereen, vooral mensen met cognitieve beperkingen, weet waar men aan toe is.

Uitleg

Geef invoervelden een label of uitleg.

Als er ergens invoer nodig is, is het voor iedereen prettig om te weten wat er verwacht wordt. Labels en uitleg helpen daarbij. Een label betekent in deze context dat er iets zichtbaar is, zoals tekst of een icoon, waardoor je als bezoeker weet wat het doel is. Denk aan:

Voornaam
Plaatsnaam
Wachtwoord
Telefoonnummer
Een vergrootglas-icoon bij een zoekfunctie

Het label moet voor iedereen duidelijk genoeg zijn.

Een uitleg (een instructie) vertelt meer over wat er verwacht wordt van de invoer, zoals de manier van spellen of schrijven. Denk aan:

een nieuw wachtwoord dat lang genoeg moet zijn
wel of geen spatie tussen de letters en cijfers van een postcode
de manier waarop een datum geschreven moet worden

Als de invoer aan bepaalde eisen moet voldoen, is het een goed idee om een uitleg toe te voegen.

Gerelateerde NL Design System-richtlijnen

Dit succescriterium past bij bijna alle richtlijnen rond formulieren.

Richtlijnen voor formulieren
Formulieren: Richtlijnen voor labels in een formulier

Hoe te testen

Zoek de invoervelden en formulieren.
Controleer van elk veld of er een beschrijvend label of behulpzame uitleg bij is.

##Tips

Het behalen van dit criterium kan onder andere ook helpen bij 2.4.6 Koppen en labels en 4.1.2 Naam, rol, waarde.
Zorg voor zowel labels als uitleg om fouten te voorkomen.
Als een nieuw wachtwoord aan bepaalde eisen moet voldoen, maak die dan meteen zichtbaar.

Veelgemaakte fouten

Fout: Labels en/of uitleg zijn niet verbonden aan de invoer.

Voor 1.3.1 Info en relaties is het belangrijk dat labels en uitleg niet alleen aanwezig zijn, maar ook in de code aan elkaar verbonden zijn. De relatie die je ziet moet ook in de code aanwezig zijn. Dit kan met het <label>-element, maar ook met aria-labelledby. Foutmeldingen kun je ook koppelen aan het invoerveld. Dit kan met aria-describedby.

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

Engelse tekst van het WCAG-succescriterium: 3.3.2 Labels or Instructions.
Nederlandse vertaling van het WCAG-succescriterium: 3.3.2 Labels of instructies.
Engelstalige informatie op How to Meet WCAG: Quick Reference 3.3.2 Labels or Instructions.
Engelstalige toelichting: Understanding SC 3.3.2 Labels or Instructions.

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.