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.
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
Aanvullingen of opmerkingen?
Deze pagina’s over WCAG worden onderhouden door NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.