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)
Ontdekt de website automatisch dat iemand iets verkeerd invult? Dan moet de website dat in tekst laten weten. Alleen een rode rand of een icoon zonder tekstalternatief is niet genoeg.
Bij elke fout moet duidelijk zijn:
- wat er fout is
- welk veld de fout bevat
Schrijf bijvoorbeeld “E-mailadres is niet ingevuld” of “Het ingevulde e-mailadres is niet geldig”.
Welk veld de fout bevat, maak je op een van deze manieren duidelijk:
- zet de foutmelding direct bij het veld
- noem in de foutmelding het label van het veld
- markeer het veld als fout, zichtbaar én in de code
Waar de foutmeldingen staan, kies je zelf: bij de velden, samen bovenaan het formulier of in een melding. Staan ze niet bij de velden? Noem dan het liefst 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 verplicht veld leeg is of als een veld 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, geef het
aria-invalid="true"en koppel een tekst die beschrijft wat er fout is metaria-describedby
- Gebruik niet alleen de standaard foutmeldingen van de browser. Gebruik je eigen validatie? Zet dan
novalidateop het<form>-element. Het attribuutrequiredop de velden blijft gewoon werken voor hulptechnologie.
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 alle verplichte velden in” (bovenaan). Het veld heeft een rode rand met fouticoon, aria-invalid="true" en het label “E-mailadres (verplicht)” | ✓ Ja | Geldt niet | Het veld is zichtbaar en in de code als fout gemarkeerd en het label maakt duidelijk wat er fout is |
| 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 naam@domein.nl” | ✓ 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
- Welke velden een bestand van een bepaald type of met een maximale grootte vragen
- Bepaal welke formulieren er zijn:
- Laat in elk formulier de verplichte velden leeg
- Verlaat elk verplicht veld met Tab zonder iets in te vullen
- Verstuur het formulier
- Controleer voor elk leeg verplicht veld dat het formulier weigert:
- Of er een foutmelding in tekst verschijnt
- Herlaad de pagina
- Vul alle verplichte velden in en vul elk veld met een eis aan de invoer 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
- Een bestand met een verkeerd bestandstype of een te groot bestand
- Verlaat elk veld met Tab
- Verstuur het formulier
- Gebruik bijvoorbeeld:
- Controleer voor elk veld met ongeldige invoer dat het formulier weigert:
- 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 de toegankelijke beschrijving duidelijk 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.
- De eis dat een foutmelding niet alleen via de ingebouwde formuliervalidatie van de browser verschijnt, staat niet letterlijk in WCAG. De eis volgt uit het doel van 3.3.1: de fout moet in tekst voor de gebruiker beschreven zijn. De melding van de browser 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.
- De koppeling tussen een foutmelding en het formulierelement in de code valt onder succescriterium 1.3.1 Info en relaties.
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 visueel als fout gemarkeerd:
- Het formulierelement moet
aria-invalid="true"hebben - Het gekoppelde label of de toegankelijke beschrijving moet duidelijk maken wat er fout is
- Het formulierelement moet
- 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)