Naar de inhoud
Zoeken

Richtlijnen subnavigatie

Geef geldige waardes aan voor een invoerveld

Geef geldige waardes aan voor een invoerveld (bijvoorbeeld de datum- of wachtwoordeisen) en niet alleen in de placeholder.

Bedenk ook of het echt belangrijk is of, bijvoorbeeld een geboortedatum of telefoonnummer aan exacte invoereisen moet voldoen.

Wachtwoord-eisen zijn in de description getoond

Voorbeeld van de waarden voor de geboortedatum worden in de description getoond

Voorbeelden

Doen

Leg uit hoe een veld in te vullen.

Bijvoorbeeld in de description.

Minimaal 8 karakters, waarvan 2 cijfers en 1 hoofdletter.

Code
<p><label for="ww">Nieuw wachtwoord</label></p>
<p id="ww_description">
  Minimaal 8 karakters, waarvan 2 cijfers en 1 hoofdletter.
</p>
<p>
  <input
    type="password"
    id="ww"
    name="wachtwoord"
    aria-describedby="ww_description"
  />
</p>

Niet doen

Wijze van invullen weglaten.

Laat de gebruiker niet raden of pas bij de foutmeldingen ontdekken wat er mis is.

Code
<p><label for="ww2">Nieuw wachtwoord</label></p>
<p>
  <input
    type="password"
    id="ww2"
    name="wachtwoord"
  />
</p>

Niet doen

Wijze van invullen alleen in de placeholder zetten.

Zeker als de wijze van invullen precies goed moet zijn.

Code
<p><label for="geboortedatum2">Geboortedatum</label></p>
<p>
  <input
    type="text"
    id="geboortedatum2"
    name="geboortedatum"
    placeholder="dd/mm/jjjj"
  />
</p>

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