Schrijf een duidelijke foutmelding
"Dit veld is verplicht" geeft onvoldoende informatie. Een op maat geschreven foutmelding geeft de gebruiker veel meer houvast.
Geef de gebruiker ook nooit de schuld. De meeste mensen worstelen met alle informatie en functionaliteit op het web. Help gebruikers zo goed mogelijk om het formulier te versturen.
Maak foutmeldingen daarom zo veel mogelijk beschrijvend en op maat. Schrijf in plaats van "Ongeldige invoer" of "Dit veld is verplicht" bijvoorbeeld:
- Vul een geldig e-mailadres in, bijvoorbeeld naam@voorbeeld.nl.
- De geldigheidsdatum van uw paspoort moet in de toekomst zijn.
- Vul het huisnummer in zodat wij je bestelling kunnen opsturen.
Gebruik een punt aan het eind van de foutmelding (of andere melding). Dan stopt de screenreader even en is het duidelijker dat de foutmelding apart een zin is.
Het design system van GOV.UK geeft duidelijke (Engelstalige) informatie over de tekst van foutmeldingen Be clear and concise. In de video Help Users Recognize, Diagnose, and Recover from Errors geeft de Nielsen Norman Group tips voor goede hulp aan gebruikers voor het verhelpen van fouten.
Het schrijven van foutmeldingen en een duidelijke toelichting op wat er mis gaat, is nodig om te voldoen de volgende WCAG-succescriteria:
- 3.3.1 Foutidentificatie (niveau A).
- 3.3.3 Foutsuggestie (niveau AA).
Doen
Leg uit waarom een datum wordt afgekeurd.
Invoerfout: De geldigheidsdatum van uw paspoort moet in de toekomst liggen.
<label for="passport-validity">Geldig tot</label><p id="description-passport-validity">Invoerfout: De geldigheidsdatum van uw paspoort moet in de toekomst liggen.</p><input id="passport-validity" type="text" name="passport-validity" aria-describedby="description-passport-validity"/>
Doen
Geef een voorbeeld van wat er verwacht wordt.
Invoerfout: Vul een geldig e-mailadres in, bijvoorbeeld naam@voorbeeld.nl.
<label for="email">E-mail</label><p id="description-email">Invoerfout: Vul een geldig e-mailadres in, bijvoorbeeld naam@voorbeeld.nl.</p><input id="email" type="email" name="email" aria-describedby="description-email"/>
Niet doen
Alleen beschrijven dat het veld verplicht is, zonder toelichting dat er informatie mist of aan welke voorwaarde niet is voldaan.
Invoerfout: Dit veld is verplicht.
<label for="passport-validity-2">Geldig tot</label><p id="description-passport-validity-2">Invoerfout: Dit veld is verplicht.</p><input id="passport-validity-2" aria-invalid="false" type="text" name="passport-validity-2" aria-describedby="description-passport-validity-2"/>
Over deze richtlijnen
Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.
We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Deel je mening op GitHub met je suggesties.