Zet de foutmeldingen bij de betreffende formuliervelden
Voor foutmeldingen geldt hetzelfde als voor descriptions: de beste locatie is boven het formulierveld. Bovendien moet de foutmelding aria-describedby gekoppeld zijn aan het formulierveld.
Hoe dit te doen is beschreven bij de richtlijn Plaats descriptions tussen label en formulierveld.
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.
Invoerfout: 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">Invoerfout: Je gekozen wachtwoord is te kort.</p><input id="wachtwoord2" type="password" name="nieuw-wachtwoord" aria-describedby="description-wachtwoord2 error-wachtwoord2"/>
Niet doen
Description boven het formulierveld en foutmelding eronder plaatsen.
Kies een wachtwoord van minimaal 8 karakters lang.
Invoerfout: 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">Invoerfout: 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.