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.
Doen
Geef invoerveld een duidelijke rand met voldoende contrast.
Dit voorbeeld heeft een contrast van 5.54:1.<input type="text"/>
<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"/>
Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
Over deze richtlijnen
Deze richtlijnen worden onderhouden door 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.