Formulierveld kleurt rood bij een fout. Dat is alles.

Je vult je e-mailadres verkeerd in. De rand van het veld wordt rood.

Geen tekst. Geen icoon. Geen uitleg. Alleen: rood.

Voor iemand met kleurenblindheid verandert er niets. De rand was grijs, de rand is nu… ook grijs. Of bruin. Of iets dat nauwelijks verschilt.

<!-- Niet doen: alleen kleur -->
<label for="email">E-mailadres</label>
<input id="email" type="email" style="border-color: red;">

<!-- Wel doen: kleur + tekst + ARIA -->
<label for="email">E-mailadres</label>
<input id="email" type="email"
       aria-describedby="fout-email"
       aria-invalid="true"
       style="border-color: red;">
<p id="fout-email" class="foutmelding">
  Vul een geldig e-mailadres in.
</p>

Drie toevoegingen:

1. Een tekstuele foutmelding die uitlegt wat er mis is
2. aria-invalid="true" zodat schermlezers weten dat het veld een fout bevat
3. aria-describedby om de foutmelding te koppelen aan het veld

De rode rand mag er zijn. Maar niet als enige indicator.

Bonuspunt: voeg een icoon toe (een uitroepteken, een kruisje) naast de foutmelding. Drie signalen: kleur, tekst, icoon. Dan mist niemand het.