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 iemand een formulier verkeerd invult en de website ontdekt dat automatisch, dan moet de gebruiker in tekst lezen dat er een fout is, waar die zit en wat er fout is. Een rode rand of een icoon alleen is niet genoeg.
Een foutmelding beschrijft wat er fout is. Daarnaast moet duidelijk zijn welk veld de fout bevat. Dat kan op drie manieren:
- de foutmelding staat direct bij het veld
- de foutmelding noemt het label van het veld
- het veld is zichtbaar én in de code als fout gemarkeerd
Schrijf bijvoorbeeld “E-mailadres is niet ingevuld” of “Het ingevulde e-mailadres ‘jansen@’ is niet geldig.”
Je kiest zelf waar de foutmeldingen staan:
- samen bovenaan het formulier
- bij de velden met een fout
- in een melding of dialoogvenster
Staan de fouten bovenaan of in een melding? Noem dan bij voorkeur het label van het veld. Dat is voor iedereen het duidelijkst.
Info
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.
Info
WCAG keurt ingebouwde formuliervalidatie van de browser niet af. In Nederlands toegankelijkheidsonderzoek is dat niet genoeg.
Hoe pas je dit toe?
- Toon een foutmelding in tekst als een veld leeg is of verkeerd is ingevuld.
- Beschrijf in de foutmelding wat er fout is.
- Maak duidelijk welk veld de fout bevat:
- zet de foutmelding direct bij het veld, of
- noem in de foutmelding het label van het veld, of
- markeer het veld zichtbaar als fout en geef het
aria-invalid="true"
- Gebruik niet alleen de standaard foutmeldingen van de browser.
Voorbeelden foutmeldingen
| Fout | Foutmelding | 3.3.1 Foutidentificatie | 3.3.3 Foutsuggestie | Opmerking |
|---|---|---|---|---|
| E-mailadres leeg gelaten | (geen tekst, alleen een rode rand) | × Nee | Geldt niet | De fout staat niet in tekst |
| E-mailadres leeg gelaten | “Dit veld is verplicht” (onder het veld) | ✓ Ja | Geldt niet | Staat bij het veld en beschrijft wat er fout is |
| E-mailadres leeg gelaten | “E-mailadres is niet ingevuld” (bovenaan het formulier) | ✓ Ja | Geldt niet | Noemt het label van het veld |
| E-mailadres leeg gelaten | “Vul alle verplichte velden in” (bovenaan het formulier) | × Nee | Geldt niet | Noemt niet welk veld de fout bevat |
| E-mailadres leeg gelaten | “Vul dit veld in.” (melding van de browser) | × Nee | Geldt niet | Alleen de ingebouwde formuliervalidatie van de browser |
| “jansen” als e-mailadres | “Controleer dit veld” | × Nee | × Nee | Beschrijft niet wat er fout is en noemt het formaat niet |
| “jansen” als e-mailadres | “Ongeldig e-mailadres” | ✓ Ja | × Nee | Beschrijft wat er fout is, maar noemt het formaat niet |
| “jansen” als e-mailadres | “Het e-mailadres mist een @, bijvoorbeeld [email protected]” | ✓ Ja | ✓ Ja | Beschrijft de fout en noemt het formaat |
| “15” bij een aantal van 1 tot en met 10 | “Het aantal is te hoog” | ✓ Ja | × Nee | Noemt het bereik niet |
| “15” bij een aantal van 1 tot en met 10 | “Het aantal is te hoog. Kies een getal tussen 1 en 10.” | ✓ Ja | ✓ Ja | Noemt het bereik |
| “XXL” bij maat S, M of L | “Deze maat bestaat niet” | ✓ Ja | × Nee | Noemt de toegestane waarden niet |
| “XXL” bij maat S, M of L | “Deze maat bestaat niet. Kies S, M of L.” | ✓ Ja | ✓ Ja | Noemt de toegestane waarden |
| “Doetinhcem” als woonplaats | “Woonplaats niet gevonden. Bedoel je Doetinchem?” | ✓ Ja | ✓ Ja | Stelt de bedoelde waarde voor ter bevestiging |
| Verkeerd wachtwoord bij inloggen | “E-mailadres of wachtwoord is onjuist” | ✓ Ja | Geldt niet | Een hint zou de beveiliging in gevaar brengen |
| “abc” als nieuw wachtwoord | “Wachtwoord is te kort” | ✓ Ja | × Nee | De eis is bekend en verraadt niks, maar wordt niet genoemd |
| “15” bij een aantal van 1 tot en met 10, aangepast naar 10 | (geen melding) | Geldt niet | × Nee | Een aangepaste waarde wordt getoetst bij 3.3.3 |
| “15” bij een aantal van 1 tot en met 10, aangepast naar 10 | “Het maximum is 10. Je invoer is aangepast naar 10.” | Geldt niet | ✓ Ja | Noemt naar welke waarde de invoer is aangepast |
Lees het artikel over toegankelijke formulieren
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?
Hoe toets je dit?
Uitzonderingen
Geen uitzonderingen
Geldt alleen voor:
- invoerfouten die automatisch worden ontdekt
Testprocedure
Test 1: Foutmeldingen
- Inventariseer de pagina
- Bepaal welke formulieren er zijn:
- Zoekformulieren
- Contactformulieren
- Nieuwsbriefinschrijvingen
- Login- en aanmeldingsformulieren
- Feedbackformulieren
- Account-instellingen
- Bestel- en betaalformulieren
- Bepaal voor elk formulier:
- Welke velden verplicht zijn
- Welke velden een verplicht invoerformaat hebben
- Welke velden een waarde binnen een bereik vereisen
- Welke velden alleen een beperkte set waarden accepteren
- Welke velden samen een geldige combinatie moeten vormen
- Bepaal welke formulieren er zijn:
- Vul elk formulier in en laat de verplichte velden leeg
- Verlaat elk verplicht veld met Tab zonder iets in te vullen
- Verstuur het formulier
- Controleer voor elk leeg verplicht veld:
- Of er een foutmelding in tekst verschijnt
- Herlaad de pagina
- Vul alle verplichte velden in en vul de velden uit stap 1 met ongeldige invoer
- Gebruik bijvoorbeeld:
- Een e-mailadres zonder @ (bijvoorbeeld “test”)
- Een verkeerde datumnotatie
- Letters in een veld voor cijfers
- Een waarde buiten het bereik
- Een waarde die niet in de set toegestane waarden staat
- Een ongeldige combinatie van velden
- Verlaat elk veld met Tab
- Verstuur het formulier
- Gebruik bijvoorbeeld:
- Controleer voor elk veld met ongeldige invoer:
- Of er een foutmelding in tekst verschijnt
- Controleer voor elke foutmelding:
- Of de foutmelding beschrijft wat er fout is
- Of de foutmelding niet alleen wordt getoond via de ingebouwde formuliervalidatie van de browser
- Controleer voor elke foutmelding of minstens één van de volgende waar is:
- Of de foutmelding direct bij het formulierelement met de fout staat
- Of de foutmelding het label van het formulierelement met de fout noemt
- Of het formulierelement met de fout visueel als fout is gemarkeerd
- Zoek in de code naar formulierelementen die alleen slagen omdat ze visueel als fout zijn gemarkeerd en controleer:
- Of het formulierelement
aria-invalid="true"heeft - Of het gekoppelde label of
aria-describedbyduidelijk maakt wat er fout is
- Of het formulierelement
Belangrijk om te weten
- Dit succescriterium geldt alleen als de website de fout automatisch ontdekt.
- Een foutmelding staat niet direct bij het formulierelement als die bijvoorbeeld bovenaan het formulier staat, in een melding of in een dialoogvenster.
- Een foutmelding die alleen via de ingebouwde formuliervalidatie van de browser verschijnt, wordt afgekeurd. De melding verdwijnt vanzelf, toont vaak maar één fout tegelijk en werkt per browser en schermlezer anders.
- Gebruik de volgende vuistregel: “Had deze informatie er ook kunnen staan vóórdat de gebruiker iets heeft ingevuld?” Als het antwoord “ja” is, dan is het een instructie die bij 3.3.2 Labels of instructies hoort. Een foutmelding beschrijft wat er mis is gegaan op basis van wat de gebruiker heeft ingevoerd.
Beoordeling
- Voor elke automatisch ontdekte invoerfout moet een foutmelding in tekst verschijnen
- De foutmelding moet beschrijven wat er fout is
- Voor alle foutmeldingen moet minstens één van de volgende zaken gelden:
- De foutmelding staat direct bij het formulierelement met de fout
- De foutmelding noemt het label van het formulierelement met de fout
- Het formulierelement met de fout is als fout gemarkeerd:
- Het formulierelement moet visueel als fout zijn gemarkeerd
- Het formulierelement moet
aria-invalid="true"hebben - Het gekoppelde label of de toegankelijke beschrijving (
aria-describedby) moet duidelijk maken wat er fout is
- Een foutmelding moet niet alleen worden getoond via de ingebouwde formuliervalidatie van de browser
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)