Toegankelijke fouten voor afspraakformulieren schrijven

Een foutmelding moet uitleggen wat iemand vervolgens kan doen. ‘Ongeldige invoer’ helpt nauwelijks bij een verkeerd datumformaat en beschrijft een bezet tijdstip onjuist. Een boeking met een onbekende status vraagt weer om een andere melding.

Drie situaties met passende teksten

De onderstaande afsprakendienst is fictief. De datum staat in een tekstveld en bestaande boekingen zijn in een overzicht te vinden. De voorbeelddatum is 14 december 2026.

De derde melding zegt niet dat de boeking mislukt is: dat is nog niet bekend. In het voorbeeld leidt ‘Afsprakenoverzicht openen’ naar bestaande boekingen. Heeft het echte product geen overzicht, dan is een andere betrouwbare manier nodig om de status vast te stellen.

Koppel de melding aan het veld

Toon het formaat en voorbeeld al voordat er een fout is. Ondersteun waar mogelijk de invoermethoden die uw doelgroep nodig heeft; vermijd onnodig strikte formaten. Dit beperkte voorbeeld toont het tekstveld na een formaatfout:

<label for="appointment-date">Datum</label>
<p id="appointment-date-hint">DD-MM-JJJJ, bijvoorbeeld 14-12-2026</p>
<input id="appointment-date" name="appointmentDate" type="text"
  value="14/12" aria-invalid="true"
  aria-describedby="appointment-date-hint appointment-date-error">
<p id="appointment-date-error">Voer de datum in als DD-MM-JJJJ.</p>

Deze code koppelt het label, de hulptekst en de fout aan hetzelfde veld. Kleur kan ondersteunen, maar de melding moet ook zonder rode rand begrijpelijk zijn. De W3C WAI-handleiding beschrijft deze koppeling via aria-describedby en begrijpelijke aanwijzingen voor correctie.

Verwijder na een geldige correctie de fouttekst, de verwijzing ernaar en de ongeldige status; de formaathulp kan blijven staan. Deze markup bewijst op zichzelf niet dat het hele formulier toegankelijk is.

Test de route naar correctie

Bij meerdere fouten na verzenden helpt een overzicht met links naar de betreffende velden. Bepaal of de focus naar het overzicht of het eerste ongeldige veld gaat en test met het toetsenbord en de bedoelde schermlezers. Dynamische meldingen moeten merkbaar zijn zonder elke toetsaanslag onnodig te onderbreken.

In het voorbeeld moet iemand de datum kunnen verbeteren zonder andere geldige gegevens opnieuw in te vullen. Controleer daarna dat de oude fout niet meer wordt voorgelezen. Bij een bezet tijdstip blijven de andere gegevens staan terwijl iemand een andere tijd kiest. Bij onzekere status verduidelijkt de volgende stap eerst de bestaande boeking.

Test ook een duidelijke succesmelding met de bevestigde afspraak. Daaraan kan iemand zien dat de taak is afgerond.

Bronnen

• W3C WAI: User Notification