Foutmeldingen in webformulieren

Officiële informatie

• Succescriterium 1.3.1 Info en relaties
• Succescriterium 1.4.1 Gebruik van kleur
• Succescriterium 2.2.1 Timing aanpasbaar
• Succescriterium 3.3.1 Foutidentificatie
• Succescriterium 3.3.3 Foutsuggestie
• Succescriterium 4.1.3 Statusberichten

Goede beschrijving en koppeling

Het is belangrijk de fout duidelijk te omschrijven en in de code en tekst te koppelen aan het juiste invoerveld. Op die manier is de foutmelding ook bruikbaar voor mensen die hulptechnologie gebruiken.

Doe dit ook voor digitale toegankelijkheid

• Maak een duidelijk beschrijvende foutmelding. Beschrijf wat er fout gaat en waar. Neem de naam uit het label mee in de melding. Dus “Het veld telefoonnummer is niet ingevuld” in plaats van “Dit veld is verplicht”.
• Draag een oplossing aan om de fout op te lossen. Doe dit alleen als deze instructie niet al duidelijk bij het invoerveld staat. Bijvoorbeeld als 9 cijfers zijn ingevuld in het veld telefoonnummer “Geen geldig telefoonnummer ingevuld. Een telefoonnummer moet bestaan uit 10 cijfers bijvoorbeeld 06-12345678”.
• Toon een foutmelding pas bij het verlaten van een veld of na het verzenden van een formulier. Niet tijdens het invullen van een veld.
• Maak geen gebruik van de standaard HTML-formuliervalidatie die browsers aanbieden. Deze geven niet voldoende informatie en zijn niet voor iedereen beschikbaar.

Meer informatie

• NL Designsystem – Formulieren
• GOV.uk Design System – Error message (Engelstalig)
• MDN Web Docs – Using built-in form validation (Engelstalig)

Meer informatie voor apps

• Appt – Meer informatie over info en relaties voor apps
• Appt – Meer informatie over gebruik van kleur voor apps
• Appt – Meer informatie over timing aanpasbaar voor apps
• Appt – Meer informatie over foutidentificatie voor apps
• Appt – Meer informatie over foutsuggestie voor apps
• Appt – Meer informatie over statusberichten voor apps