Zoekformulier

Zoeken

Filteren

Dit veld is verborgen bij het bekijken van het formulier
Dit veld is verborgen bij het bekijken van het formulier
Dit veld is verborgen bij het bekijken van het formulier
Dit veld is verborgen bij het bekijken van het formulier
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Foutmeldingen in een formulier op een website

Over foutmeldingen

Formulieren zijn een manier om informatie te verzamelen of in te vullen. Soms wordt hierbij een fout gemaakt, bijvoorbeeld als iemand een een veld vergeet in te vullen of een fout maakt bij het invullen van een veld.

Een foutcontrole kijkt automatisch of een veld niet of verkeerd is ingevuld. Duidelijke foutmeldingen hierbij zijn essentieel voor het oplossen van invoer fouten voor mensen met een cognitieve beperking.

Een goede foutmelding:

  • gebruikt niet alleen kleur om de fout aan de duiden;
  • staat dichtbij het betreffende formulierelement;
  • is in de code gekoppeld aan het betreffende formulierelement.

Benoem in een foutmelding waar de fout zit

Schrijf een foutmelding altijd uit in tekst en geef aan om welk veld het gaat. Benoem minimaal het label van het veld waar de fout is gevonden.

Foutmeldingen in tekst zijn voor iedereen makkelijk te vinden en te begrijpen. De tekst kan eventueel worden aangevuld met andere aanwijzingen, zoals met een icoon of kleur. Zet de foutmelding dichtbij bij het betreffende veld.

Fout voorbeeld: Foutmelding benoemt niet waar de fout zit

In deze foutmeldingen wordt niet benoemd waar de fout zit, het label wordt niet benoemd in de foutmelding:

  • Fout.
  • Ongeldige invoer.
  • Dit veld is verplicht.

Goed voorbeeld: Foutmelding benoemt waar de fout zit

In deze foutmeldingen wordt benoemd waar de fout zit, het label wordt benoemd in de foutmelding:

  • Vul je voornaam in.
  • Huisnummer is niet juist ingevuld.
  • Voornaam mag niet leeg worden gelaten.
  • Het veld ‘Straatnaam’ is leeg. Het is een verplicht veld en moet ingevuld worden.

Koppel foutmeldingen in de code

aria-desribedby

Foutmeldingen worden in de code gekoppeld aan het bijbehorende formulierelement met het aria-describedby-attribuut.

Zorg ook dat het aria-invalid-attribuut met de waarde "true" wordt toegevoegd aan het <​input​>-element.

In de code ziet dat er zo uit:

aria-errormessage

Voor deze toepassing is er ook het aria-errormessage-attribuut, de ondersteuning hiervoor is op dit moment nog onvoldoende. Het wordt op dit moment nog afgeraden dit attribuut te gebruiken.

Benoem in een foutmelding wat de fout is en geef suggesties ter verbetering

Als er een fout wordt gevonden beschrijf in de foutmelding dan duidelijk de fout die gemaakt is. Bijvoorbeeld dat een veld nog niet is ingevuld.

Als er ook suggesties bekend zijn om de de fout te verbeteren, dan moeten deze ook worden benoemd. Bijvoorbeeld als er een bepaald invoerformaat wordt verwacht of als de invoer binnen een bepaald bereik moet vallen. Deze suggesties helpen om beter te begrijpen welke fout is gemaakt en wat er precies moet worden ingevuld.

Een aantal suggesties zijn onder andere:

  • Een telefoonnummer bestaat uit 10 cijfers.
  • Een e-mailadres wordt genoteerd in het formaat voorbeeld@domein.nl.
  • Een postcode bestaat uit 4 cijfers en 2 letters.
  • Een datum wordt genoteerd in het formaat dd-mm-jjjj.
  • Een URL begint met http:// of https://.

Fout voorbeeld: Foutmelding geeft geen suggestie voor verbetering

In deze foutmelding staat geen suggestie ter verbetering van de invoer:

  • Dit veld is verplicht.
  • ‘Telefoonnummer’ is niet juist ingevuld.
  • Het e-mailadres ‘voorbeeld@’ is ongeldig.

Goed voorbeeld: Foutmelding geeft een suggestie voor verbetering

In deze foutmelding staat een suggestie ter verbetering van de invoer:

  • ‘Voornaam’ is nog niet ingevuld en mag niet leeg zijn.
  • ‘Telefoonnummer’ is niet juist ingevuld. Een telefoonnummer bestaat uit minimaal 10 cijfers.
  • Het e-mailadres ‘voorbeeld@’ is ongeldig. Gebruik een geldig e-mailadres, bijvoorbeeld “voorbeeld@domein.nl”.

Gebruik niet alleen kleur om fouten in een formulier te markeren

Kleur kan helpen om eenvoudig te tonen waar de fouten in een formulier zitten, zoals een rode rand rond het invoerveld of met een rood gekleurd label, maar het mag niet de enige manier zijn waarop het wordt onderscheiden van de andere tekst. Mensen met een visuele beperking kunnen informatie die alleen met kleur worden aangegeven niet (of niet goed) onderscheiden.

Gebruik ook andere manieren, zoals met tekst of met een icoon.

Gebruik niet de foutmeldingen van HTML-validatie

De meeste browsers kunnen zelf controleren of een veld is ingevuld. Hiervoor wordt het required-attribuut gebruikt.

Deze foutmeldingen zijn doorgaans niet duidelijk genoeg.

Zie ook