Schrijf een foutmelding uit in tekst

Schrijf de foutmelding altijd uit in tekst. Dus niet alleen met een rood randje om het veld heen of met een icoontje van een uitroepteken, maar in duidelijke taal.

Je kunt zeker kleur en icoontjes gebruiken, maar niet als enige foutindicatie.

Formulierfouten in tekst beschrijven is nodig om te voldoen aan de WCAG-succescriteria:

1.3.1 Info en relaties (niveau A).
3.3.1 Foutidentificatie (niveau A).

Doen

Naast een visuele indicatie ook een foutmelding in tekst tonen.

In dit voorbeeld staat er een rood randje om het invoerveld heen, plus de foutmelding in tekst.

Geldig tot

Invoerfout: Vul een geldige datum in (bijvoorbeeld 6 januari 2030).

<label for="passport-validity-1">Geldig tot</label><p id="passport-validity-date-1">Invoerfout: Vul een geldige datum in (bijvoorbeeld 6 januari 2030).</p><input id="passport-validity-1" aria-invalid="true" type="text" name="passport-validity-1" aria-describedby="description-passport-validity-1"/>

Niet doen

Alleen een visuele indicatie geven dat er iets fout is gegaan.

In dit voorbeeld staat er alleen een rood randje om het invoerveld heen.

Geldig tot

<label for="passport-validity-2">Geldig tot</label><input id="passport-validity-2" aria-invalid="true" type="text" name="passport-validity-2"/>

Over deze richtlijnen

Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.