Sluit

Hoe maak ik foutmeldingen in formulieren digitaal toegankelijk?

Main content

Maakt een bezoeker bij het invullen van antwoorden in een webformulier een fout? Dan is een duidelijke foutmelding belangrijk. Laat zien wat er fout is gegaan en hoe het beter kan.

Met de volgende tips maak je foutmeldingen digitaal toegankelijk, zodat ze zichtbaar en toegankelijk zijn voor iedereen. Sommige bezoekers gebruiken hulpsoftware om je website te gebruiken, zoals voorleessoftware. Zorg dat de foutmelding ook door hulpsoftware wordt voorgelezen.

Wat zijn de eisen vanuit WCAG?

  • Noem de foutmelding ook altijd in tekst. De foutmelding alleen met kleur aangeven is niet genoeg, voorbeelden hiervan zijn een rode rand om het invoerveld of labels rood maken zonder de labeltekst te veranderen.
  • Geef de tekstkleur van de foutmelding genoeg contrast. Voor tekst met een normale lettergrootte is dat 4,5:1.
  • Plaats de foutmelding boven het invoerveld. Als dat niet mogelijk is, zorg voor een programmatische verbinding tussen de foutmelding en het invoerveld.
  • Zorg dat de foutmelding zichtbaar blijft totdat de gebruiker de fout heeft aangepast. Gebruik geen browserafhankelijke foutmeldingen. Ze blijven niet in beeld staan.
  • Is je website geschreven in meerdere talen? Zorg dan dat de foutmelding wordt vertaald in dezelfde taal als de taal die de bezoeker heeft geselecteerd.
  • Zorg dat hulpsoftware de foutmelding kan voorlezen. Als de focus niet naar de foutmelding gaat, is het een statusbericht. Deze moet dan voldoen aan succescriterium 4.1.3.
  • Omschrijf de foutmelding zo specifiek mogelijk. Geef aan wat er fout gaat, waar het fout gaat en hoe het beter kan.
  • Omschrijf in de foutmelding duidelijk welk invoerveld niet goed is ingevuld:
    • Staat de foutmelding bij het invoerveld? Dan mag je in de foutmelding verwijzen naar het invoerveld met "dit veld".
    • Staat de foutmelding verder weg van het invoerveld, bijvoorbeeld bovenaan het formulier? Vermeld dan duidelijk over welk invoerveld de foutmelding gaat, bijvoorbeeld "het e-mailveld". · Geef in de foutmelding altijd een voorstel voor een oplossing. Bijvoorbeeld "Bij een postcode ontbreekt een spatie".
  • Vereist het invoerveld een bepaald formaat, bijvoorbeeld een postcode met een spatie? Vermeld dit in het label. Zo voorkom je dat de bezoeker een fout maakt.
  • Er is een verschil tussen een foutmelding en een instructie. Een foutmelding mag geen instructie zijn:
    • Een foutmelding beschrijft wat er misgaat bij het invullen en kan niet op de pagina staan voordat het webformulier is ingevuld. Bijvoorbeeld "het e-mailadres is niet ingevuld".
    • Een instructie geeft geen informatie over wat er misgaat en kan op de pagina staan voordat het webformulier is ingevuld. Bijvoorbeeld "dit veld is verplicht".

In jouw specifieke situatie kan de bovenstaande opsomming niet voldoende zijn. Raadpleeg daarom de officiële documentatie.

Wat zijn onze tips?

  • Zorg ervoor dat de ingevoerde gegevens niet verloren gaan door fouten in een formulier. Dit voorkomt dat de bezoeker de gegevens opnieuw moet invullen. Dit geldt niet voor gevoelige informatie zoals wachtwoorden.
  • Check of alle foutmeldingen aan de voorwaarden voldoen. Verstuur bijvoorbeeld een leeg webformulier of vul foute antwoorden in om de foutmeldingen te zien.

Ook interessant

Officiële documentatie