Geef duidelijk aan waar een invoerveld is

Gebruikers moeten herkennen waar en hoe groot het invoerveld, radiobutton of checkbox is.

Het kleurcontrast van de randen (borders) ten opzichte van de achtergrondkleur moet daarom 3:1 of hoger zijn.

Het duidelijk aangeven van een invoerveld is nodig om te voldoen aan het WCAG-succescriterium 1.4.11 Contrast van niet-tekstuele content (niveau AA).

Doen

Geef invoerveld een duidelijke rand met voldoende contrast.

Dit voorbeeld heeft een contrast van 5.54:1.

<input type="text"/>

Doen

Geef een radiobutton voldoende kleurcontrast.

Dit voorbeeld heeft een contrast van 5.54:1.

Kies je kleur

Blauw

Groen

Rood

<fieldset><legend>Kies je kleur</legend><div><input type="radio" id="radio1" name="kleur"/> <label for="radio1">Blauw</label></div><div><input type="radio" id="radio2" name="kleur"/> <label for="radio2">Groen</label></div><div><input type="radio" id="radio3" name="kleur"/> <label for="radio3">Rood</label></div></fieldset>

Niet doen

Geef invoerveld een slecht zichtbare rand met onvoldoende contrast.

Dit voorbeeld heeft een contrast van 1.08:1.

<input type="text"/>

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.