Hoe omgaan met foutafhandeling en foutmeldingen in een formulier? De aanpak hieronder geeft alvast gebruiksvriendelijke en toegankelijke richtlijnen.
Spontane foutmeldingen
Een spontane foutmelding is een melding die verschijnt zodra de gebruiker het invoerveld verlaat. Validatie die gebeurt terwijl de gebruiker nog in het veld aan het typen is, wordt best vermeden. Het is dus van uiterst belang dat de validatie pas plaatsvindt bij het verlaten van het invoerveld (wanneer het volgende invoerveld in focus is bijvoorbeeld).
De melding verschijnt het best gekoppeld aan het invoerveld, net boven datzelfde invoerveld. Daarbovenop neemt het invoerveld een error state aan wanneer er een fout gedetecteerd wordt.
Deze aanpak geeft meteen feedback aan de gebruiker, zonder te snel een fout te registreren, of net moeten wachten tot na validatie om een fout te detecteren, wat soms tot frustratie kan leiden. Daarbij kan de foutmelding helpen met duidelijkheid te scheppen rond de juiste verwachte input bij de gebruiker, al zijn we dit liever een stapje voor door gebruik te maken van de annotation.
Valideren na verzenden
Daarnaast kan formuliervalidatie ook plaatsvinden bij het verzenden van de gegevens. Dit betekent dat de controle pas gebeurt nadat op een knop is gedrukt. Dit kan een knop zijn die het formulier in z’n geheel verzendt, of een knop die naar een volgende pagina in het formulier leidt.
Zijn er fouten in het formulier? Volg dan deze aanpak:
- Stap 1
Toon een algemene foutmelding
Bevat het formulier verkeerde gegevens of ontbreken er zaken? In dat geval wordt de pagina na het verzenden van de formuliergegevens opnieuw ingeladen. Op deze “nieuwe” ingeladen pagina, verschijnt idealiter een algemene foutmelding bovenaan de pagina. Dit element moet de focus krijgen zodat screen readers deze dan voorlezen. Enkel er automatisch naartoe scrollen is niet genoeg.
De foutmelding bevat uitleg waarom de gebruiker niet verder kan gaan en zich nog altijd op dezelfde pagina bevindt. Zo begrijpt de gebruiker meteen waarom hij of zij na het verzenden op dezelfde pagina blijft.
Wanneer slechts enkele velden een fout bevatten, kunt u deze velden vermelden in de algemene foutmelding en voorzien van een link (anchor link) naar het desbetreffende veld zelf (zie voorbeeld lager op de pagina). Echter wordt dit moeilijker toe te passen naarmate er meer velden fouten bevatten. De lijst kan oplopen en zo ook een overweldigend gevoel geven aan de gebruiker.
- Stap 2
Toon een foutmelding per veld
De betreffende velden met een fout moeten ook duidelijk weergegeven worden met een foutstatus en foutmelding. Probeer een duidelijke foutmelding te schrijven: waarom kon de invoer niet gevalideerd worden en/of hoe de gebruiker dit kan oplossen.
Voorbeelden van validatie na verzending
Idealiter combinatie van beiden
Een geschikte aanpak zou de combinatie van zowel spontane validatie als validatie na verzenden zijn.
Spontane validatie zorgt voor directe feedback naar de gebruiker toe, door middel van meldingen die bij de invoervelden verschijnen op het ogenblik zelf. Daarnaast kan het valideren na verzenden van de gegevens eventuele fouten capteren die gemist werden door de spontane validatie, en deze achteraf ook beknopt weergeven aan de gebruiker.
De combinatie van beide soorten validatie zorgt ervoor dat bepaalde fouten gecapteerd kunnen worden voor de pagina opnieuw moet laden. Dit zorgt voor een meer gebalanceerde uitkomst, zeker als er alsnog fouten opgemerkt worden tijdens het valideren na verzenden. Zo vermijdt men ook dat de algemene foutmelding bovenaan de pagina een te lange lijst aan fouten zou bevatten.
Maak foutmeldingen duidelijk, behulpzaam en beknopt
- Geef duidelijke en specifieke instructies: Beschrijf precies wat de gebruiker moet aanpassen. Bijvoorbeeld: als een e-mailadres niet geldig is, leg uit wat er ontbreekt of fout is.
- Bied voorbeelden of suggesties aan: Help gebruikers waar mogelijk met concrete voorbeelden of tips om de fout op te lossen.
- Houd het kort en duidelijk: Zorg dat foutmeldingen beknopt en to the point zijn. Korte, heldere boodschappen maken het makkelijker om problemen snel te begrijpen en op te lossen, zonder verwarring.
Toegankelijkheid
Voor beide soorten validatie, zowel spontaan als na verzenden, bestaan enkele aandachtspunten op vlak van digitale toegankelijkheid.
Spontane validatie
- Gebruik hier aria-role=”alert” voor de error zodat de error aangekondigd wordt.
Na verzenden, wanneer fouten aanwezig
- Grote algemene foutmelding bovenaan moet de focus krijgen. Hierdoor is de aria-role=”alert” niet nodig.
- Idealiter heeft de globale error links (anchors) naar de specifieke foutieve velden
- “Dit is een verplicht veld” zegt niet genoeg qua foutboodschap, idealiter vermeld je de naam van het veld erbij. Nog beter is om visually-hidden ook “Fout” te vermelden. Bijvoorbeeld: <p><span class=”visually-hidden”>Fout:</span> Vul je voornaam in</p> De reden hiervoor is dat een screen reader dit verborgen element dan voorleest als “Fout: Vul je voornaam in”.
- Opgepast! Het hidden attribuut verbergt het element voor iedereen, ook screen readers. Dit mag dus niet: <p><span hidden>Fout:</span> Vul je voornaam in</p>