Succescriterium 3.3.1 Foutidentificatie
Als een invoerfout automatisch ontdekt wordt, dan wordt het onderdeel waar de fout zit geïdentificeerd en wordt de fout tekstueel aan de gebruiker meegedeeld.
Foutidentificatie begrijpen (Engelstalig)
Als je een formulier invult en er gaat iets fout, dan moet de gebruiker precies weten wat er mis is gegaan. Je moet daarom fouten duidelijk aanduiden met tekst. Gebruik bijvoorbeeld niet “Dit veld is verplicht” als foutmelding, maar wees zo specifiek mogelijk:
- Geef duidelijke uitleg in tekst bij fouten
- Zorg dat de gebruiker weet welk veld de fout bevat
- Beschrijf wat er mis is gegaan
Je kunt foutmeldingen op verschillende manieren tonen:
- Alle fouten bij elkaar aan het begin van het formulier
- Fouten bij de specifieke velden
Het doel is dat gebruikers weten dat er een fout is en waar deze is.
Uitzondering:
- Login- en wachtwoordvelden
Let op: Dit succescriterium (niveau A) vereist een beschrijving van wát er fout is, terwijl succescriterium 3.3.3 Foutsuggestie (niveau AA) een suggestie verwacht van hóe de fout kan worden opgelost.
Hoe pas je dit toe?
- Zorg voor foutmeldingen in tekst bij een verkeerd ingevuld formulierveld.
- Beschrijf in de foutmelding waar de fout zit.
- Beschrijf in de foutmelding wat er fout is gegaan.
- Zorg dat de foutmelding in de code is gekoppeld aan het bijbehorende formulierelement.
- Gebruik
aria-invalid="true"op het<input>-element van het formulierelement waar de fout is.
Handige tips
- Zet foutmeldingen dicht bij het betreffende veld.
- Gebruik eventueel ook visuele aanwijzingen zoals kleur of pictogrammen (maar nooit alleen kleur).
Voor wie is dit belangrijk?
- Mensen die een schermlezer gebruiken.
- Mensen die een visuele beperking hebben.
- Mensen die een cognitieve, taal- of leerbeperking hebben.
Wie is verantwoordelijk?
- Redacteur
- Ontwikkelaar
Hoe toets je dit?
Testprocedure
- Inventariseer de pagina
- Bepaal of er formulieren met mogelijk foutmeldingen aanwezig zijn:
- Contactformulieren
- Nieuwsbriefinschrijvingen
- Login- en aanmeldingsformulieren
- Feedbackformulieren
- Account-instellingen
- Bestellings- en checkoutformulieren
- Enz.
- Bepaal voor elk formulier:
- Welke velden verplicht zijn
- Welke velden een specifiek formaat vereisen
- Welke velden binnen een vooraf bepaald bereik moeten vallen
- Bepaal of er formulieren met mogelijk foutmeldingen aanwezig zijn:
- Vul het formulier opzettelijk fout in
- Laat verplichte velden leeg
- Voer ongeldige gegevens in:
- E-mailadres zonder @
- Verkeerde datumnotatie
- Te kort telefoonnummer
- Letters in numerieke velden
- Invoer die buiten een verplicht bereik valt
- Enz.
- Verstuur het formulier
- Controleer of er foutmeldingen verschijnen
- Bepaal of er nieuwe tekst zichtbaar is
- Bepaal of foutmeldingen alleen met kleur worden getoond
- Bepaal voor elke foutmelding
- Of de foutmelding in tekst is
- Of de veldnaam in de foutmelding staat
- Of de foutmelding in de code is gekoppeld
- Of de precies wordt beschreven wat de fout is
- Corrigeer de fouten en test opnieuw
Belangrijk om te weten
- Dit succescriterium geldt alleen als het formulier automatisch fouten detecteert
- Fouten kunnen zichtbaar worden tijdens het typen of na het versturen van het formulier
- Gebruik de volgende vuistregel: “Had deze informatie er ook kunnen staan vóórdat de gebruiker iets heeft ingevuld?”
Beoordeling
- Het veld met een fout moet worden geïdentificeerd met tekst
- Foutmeldingen moeten in de code gekoppeld zijn aan het juiste invoerveld
- Foutmeldingen moeten worden beschreven in tekst
- Correcte invoer mag niet worden gewist bij het opnieuw tonen van het formulier
Bronnen
- WCAG 2.2 – Succescriterium 3.3.1 Foutidentificatie
- User Notification | Web Accessibility Initiative (WAI) | W3C (Engelstalig)
- WebAIM: Usable and Accessible Form Validation and Error Recovery (Engelstalig)