Plaats descriptions tussen label en formulierveld
Plaats alle descriptions op een consistente plek, liefst tussen het label en het formulierveld. Omdat de gebruiker van boven naar beneden leest, komt deze informatie na het label op een logisch moment in de leesvolgorde.
Ook is dan de kans dat de informatie overlapt met bijvoorbeeld browserpopups kleiner. Lees hiervoor het artikel Avoid Messages Under Fields van Adrian Roselli.
Doen
Plaats alle descriptions op een consistente plek, liefst tussen het label en het formulierveld.
Kies een wachtwoord van minimaal 8 karakters lang.
<label for="wachtwoord1">Nieuw wachtwoord</label><p id="description-wachtwoord1">Kies een wachtwoord van minimaal 8 karakters lang.</p><input id="wachtwoord1" type="password" name="nieuw-wachtwoord" aria-describedby="description-wachtwoord1"/>
Doen
Plaats alle descriptions, ook de foutmeldingen, op een consistente plek, liefst tussen het label en het formulierveld.
Kies een wachtwoord van minimaal 8 karakters lang.
Je gekozen wachtwoord is te kort.
<label for="wachtwoord2">Nieuw wachtwoord</label><p id="description-wachtwoord2">Kies een wachtwoord van minimaal 8 karakters lang.</p><p id="error-wachtwoord2">Je gekozen wachtwoord is te kort.</p><input id="wachtwoord2" type="password" name="nieuw-wachtwoord" aria-describedby="description-wachtwoord2 error-wachtwoord2"/>
Niet doen
Description onder het formulierveld plaatsen.
Kies een wachtwoord van minimaal 8 karakters lang.
<label for="wachtwoord3">Nieuw wachtwoord</label><input id="wachtwoord3" type="password" name="nieuw-wachtwoord" aria-describedby="description-wachtwoord3"/><p id="description-wachtwoord3">Kies een wachtwoord van minimaal 8 karakters lang.</p>
Niet doen
Description boven het formulierveld en foutmelding eronder plaatsen.
Kies een wachtwoord van minimaal 8 karakters lang.
Je gekozen wachtwoord is te kort.
<label for="wachtwoord4">Nieuw wachtwoord</label><p id="description-wachtwoord4">Kies een wachtwoord van minimaal 8 karakters lang.</p><input id="wachtwoord4" type="password" name="nieuw-wachtwoord" aria-describedby="description-wachtwoord4 error-wachtwoord4"/><p id="error-wachtwoord4">Je gekozen wachtwoord is te kort.</p>
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.