Vermeld duidelijk of een veld wel of niet verplicht is

Laat gebruikers duidelijk weten welke informatie ingevuld moeten worden om een formulier te verzenden. Hiervoor heb je twee opties.

Door de niet-verplichte velden te markeren.
Door de verplichte velden te markeren.

Op basis van gebruikersonderzoek zouden wij de eerste optie aanbevelen.

Plaats de uitleg over wel of niet verplichte velden altijd boven het formulier, zodat de gebruiker weet wat te verwachten bij het invullen.

Maak de markering ook onderdeel van de labeltekst.

Screenreadergebruikers krijgen deze informatie daarnaast ook voorgelezen door aria-required of required in de code op te nemen bij de verplichte velden.

Door te helpen fouten te voorkomen voldoe van aan WCAG-succescriterium 3.3.2 Labels of instructies (niveau A).

Optie 1: 'niet-verplichte' velden markeren

Uitgaande van het gegeven dat je in formulieren enkel het broodnodige uitvraagt zullen de meeste velden verplicht zijn. Hierdoor vormen de niet-verplichte velden een uitzondering. Geef dit aan door bij de niet-verplichte velden de tekst '(niet verplicht)' in het label op te nemen.

Gebruikersonderzoek over de toepassing van 'niet verplicht' versus 'verplicht':

4 common mistakes UI/UX designers make when trying to help users spot required form fields (and what user research shows is better) van Adam Silver.
Blog post: Marking Required vs. Optional form fields van Luke Wroblewski.
Chatbot answer: Required versus optional fields van Luke Wroblewski.

Let op: Het woord 'optioneel' kan te moeilijk zijn voor mensen die laaggeletterd zijn. Gebruik dus 'niet verplicht'.

Doen

Geef boven het formulier aan hoe niet-verplichte velden worden aangegeven.

Vul alle velden in. Als een veld niet verplicht is, staat dit erbij.

<p>Vul alle velden in. Als een veld niet verplicht is, staat dit erbij.</p><form><label for="kleur1">Wat is je lievelingskleur</label><input type="text" id="kleur1" name="lievelingskleur" aria-required="true" aria-invalid="false"/><label for="dier1">Wat is je lievelingsdier (niet verplicht)</label><input type="text" id="dier1" name="lievelingsdier"/><button>Verstuur</button></form>

Niet doen

De gebruiker laten raden wat er al dan niet verplicht is.

<form><label for="kleur2">Wat is je lievelingskleur</label><input type="text" id="kleur2" name="lievelingskleur" aria-required="true" aria-invalid="false"/><label for="dier2">Wat is je lievelingsdier</label><input type="text" id="dier2" name="lievelingsdier"/><button>Verstuur</button></form>

Optie 2: 'verplichte' velden markeren

Zijn de meeste velden in een formulier 'niet verplicht'? Of is het technisch niet mogelijk om de niet-verplichte velden te markeren? Geef dit dan aan door bij de verplichte velden de tekst '(verplicht)' in het label op te nemen.

Een populaire manier om verplichte velden aan te duiden is door in het label een asterisk '*' op te nemen. Dit heeft niet de voorkeur omdat dit een extra denkstap voor de gebruikers vergt, zoals blijkt uit bovenstaand gebruikersonderzoek.

Gebruik je deze constructie toch omdat je CMS of plug-in alleen deze mogelijkheid biedt, leg dan boven het formulier uit wat de asterisk betekent. Een asterisk alleen bij het formulierveld is niet voldoende, niet iedereen bezit deze voorkennis.

Uit onderzoek van Elevenways blijkt dat de asterisk goed wordt voorgelezen door screenreaders: Hoe screenreaders speciale tekens lezen: een update.

Doen

Geef boven het formulier aan hoe verplichte velden worden aangegeven.

Als een veld verplicht is, staat dit erbij.

<p>Als een veld verplicht is, staat dit erbij.</p><form><label for="kleur3">Wat is je lievelingskleur (verplicht)</label><input type="text" id="kleur3" name="lievelingskleur" aria-required="true" aria-invalid="false"/><label for="dier3">Wat is je lievelingsdier</label><input type="text" id="dier3" name="lievelingsdier"/><button>Verstuur</button></form>

Doen

Geef boven het formulier aan hoe verplichte velden worden aangegeven en leg uit wat asterisk betekent.

Als een veld verplicht is, staat er een * bij.

<p>Als een veld verplicht is, staat er een * bij.</p><form><label for="kleur4">Wat is je lievelingskleur *</label><input type="text" id="kleur24" name="lievelingskleur" aria-required="true" aria-invalid="false"/><label for="dier4">Wat is je lievelingsdier</label><input type="text" id="dier4" name="lievelingsdier"/><button>Verstuur</button></form>

Niet doen

Bij alle velden aangeven of het al dan niet verplicht is.

<form><label for="kleur5">Wat is je lievelingskleur (verplicht)</label><input type="text" id="kleur5" name="lievelingskleur" aria-required="true" aria-invalid="false"/><label for="dier5">Wat is je lievelingsdier (niet verplicht)</label><input type="text" id="dier5" name="lievelingsdier"/><button>Verstuur</button></form>

Screenreaderfeedback

Vertel een gebruiker van hulptechnologieën (als screenreaders) dat een veld verplicht is met het ARIA-attribuut aria-required="true".

Je kunt ook het HTML-attribuut required gebruiken in plaats van aria-required, maar dit vereist ook het attribuut novalidate in het <form> element. Novalidate voorkomt dat de formuliervalidatie van de browser in werking treedt. Voor aria-required="true" hoeft dit niet. Alhoewel het gebruik van required in plaats van aria-required niet fout is, geven we daarom de voorkeur aan aria-required.

Doen

Gebruik aria-required om aan te geven of een veld verplicht is.

<form><label for="kleur8">Wat is je lievelingskleur (verplicht)</label><input type="text" id="kleur8" name="lievelingskleur" aria-required="true" aria-invalid="false"/><button>Verstuur</button></form>

Doen

Gebruik required om aan te geven of een veld verplicht is, in combinatie met novalidate.

<form novalidate=""><label for="kleur9">Wat is je lievelingskleur (verplicht)</label><input type="text" id="kleur9" name="lievelingskleur" required="" aria-invalid="false"/><button>Verstuur</button></form>

Niet doen

Geef helemaal niet aan of een veld verplicht is, en laat de gebruiker dit pas weten bij de foutmeldingen.

<form><label for="kleur10">Wat is je lievelingskleur</label><p id="fout10">Invoerfout: Vul de naam van een kleur in.</p><input type="text" id="kleur10" aria-describedby="fout10" name="lievelingskleur"/><button>Verstuur</button></form>

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.