Naar de inhoud
Zoeken

Richtlijnen subnavigatie

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

Code
<label for="contrast-input-goed">Voorbeeld invoerveld met goed contrast</label>
<input
  type="text"
  id="contrast-input-goed"
/>

Doen

Geef een radiobutton voldoende kleurcontrast.

Dit voorbeeld heeft een contrast van 5.54:1

Kies je kleur
Code
<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

Code
<label for="contrast-input-slecht">
  Voorbeeld invoerveld met slecht contrast
</label>
<input
  type="text"
  id="contrast-input-slecht"
/>

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.

Hoofdmenu