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.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.<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.