Uit te vragen informatie in een formulier
Welke informatie heb je nodig van je gebruiker? En welke niet? Waarom heb je bepaalde informatie nodig en wat doe je ermee? Overweeg dit zorgvuldig bij het samenstellen van een formulier.
Bij het uitvragen van informatie in een formulier zijn de volgende punten belangrijk:
- Leg uit waarom informatie nodig is.
- Check of informatie ècht nodig is.
- Biedt verschillende manieren om contact op te nemen.
- Vraag niet meerdere keren dezelfde informatie uit.
- Geef invoervelden geen minimum en/of maximum aantal in te voeren tekens.
Leg uit waarom informatie nodig is
Soms lijkt een vraag overbodig, terwijl deze informatie essentieel is voor het verwerken van de gegevens. In zulke gevallen is het een goed idee een korte uitleg toe te voegen, om bijvoorbeeld het doel te beschrijven.
Vertel waarom je deze informatie nodig hebt en wat je ermee doet. Uitleg geeft duidelijkheid aan de gebruiker en voorkomt onzekerheid bij het invullen.
Doen
Leg het doel uit.
Met uitleg weet de gebruiker waar die aan toe is.We hebben uw e-mailadres nodig om een afspraakbevestiging te kunnen sturen.
<label for="email">E-mailadres</label><p id="email-description">We hebben uw e-mailadres nodig om een afspraakbevestiging te kunnen sturen.</p><input aria-describedby="email-description" autocomplete="email" id="email" type="email"/>
Niet doen
Privacygevoelige informatie vragen zonder uitleg waarom deze gegevens nodig zijn.
<label for="bsn">Burgerservicenummer</label><input id="bsn" type="text"/>
Check of informatie ècht nodig is
Kortere formulieren kunnen sneller worden ingevuld. Ga dus per vraag na of deze informatie echt nodig is.
Zo is het vaak onnodig om te vragen naar een straatnaam, als huisnummer en postcode al bekend zijn. Is het echt belangrijk om te weten of iemand een man/vrouw/andere is?
Is het nodig voor het afhandelen van het formulier dat gebruiker via DigiD inlogt, zodat ook het burgerservicenummer van de verzender bekend wordt? Uitvragen van een BSN is aan wettelijke richtlijnen gebonden.
Biedt verschillende manieren om contact op te nemen
Vraag niet alleen om contact via een telefoonnummer. Gebruikers die doof zijn of heel verlegen, stotteren of een vorm van autisme hebben, kunnen soms niet (goed) bellen. Andere gebruikers spreken de Nederlandse taal misschien niet goed, waardoor zij liever niet bellen. Voeg een alternatief toe, bijvoorbeeld in de vorm van een e-mailadres of chat functionaliteit.
Doen
Naast een telefoonnummer ook een e-mailadres uitvragen.
<label for="telefoon1">Uw telefoonnummer</label><input id="telefoon1" type="tel" name="telefoon" autocomplete="tel"/><label for="email1">Uw e-mailadres</label><input id="email1" type="email" name="email" autocomplete="email"/>
Niet doen
Alleen een telefoonnummer uitvragen.
<label for="telefoon2">Uw telefoonnummer (verplicht)</label><input id="telefoon2" type="tel" name="telefoon" autocomplete="tel" aria-required="true"/>
Vraag niet meerdere keren dezelfde informatie uit
Voorkom herhaling: om zeker te weten dat iemand het juiste e-mailadres heeft ingevuld, wordt in sommige formulieren de vraag twee keer gesteld en dan vergeleken. Dit kan gebruiksvriendelijker!
Als het essentieel is dat de informatie correct is, zijn er deze alternatieven:
- toon dan voor het verzenden nog eens de invoer, bijvoorbeeld op een controlepagina;
- (als het om een e-mailadres gaat) stuur een e-mail ter bevestiging om de juistheid van het e-mailadres te controleren.
Gegevens niet meerdere keren binnen een formulier uit vragen is nodig om te voldoen aan het WCAG-Succescriterium 3.3.7 Overbodige Invoer (niveau A).
Niet doen
Herhaling ter bevestiging.
<label for="email1">Uw e-mailadres</label><input id="email1" type="email" name="email" autocomplete="email"/><label for="email2">Herhaal uw e-mailadres</label><input id="email2" type="email" name="email" autocomplete="email"/>
Geef invoervelden geen minimum/maximum tekstlengte
Soms is het verleidelijk om met minimale of maximale lengtes te werken. Maar in veel gevallen, bijvoorbeeld bij namen, kan dit bijvoorbeeld zorgen dat mensen hun naam niet kunnen invullen. Optimaliseer in dit geval voor uitersten. Er zijn namen van één karakter en van vijftig: aannames vermijden is dus het devies.
Doen
Geef de mogelijkheid korte en lange teksten in te vullen.
<label for="woonplaats1">Uw woonplaats</label><input id="woonplaats1" type="text" name="woonplaats" autocomplete="address-level2"/>
Niet doen
Limiteer het maximaal aantal in te voeren tekens.
Mensen uit Gasselterboerveenschemond of Westerhaar-Vriezenveensewijk willen ook graag hun woonplaats invoeren.<label for="woonplaats2">Uw woonplaats</label><input id="woonplaats2" type="text" name="email" maxlength="20" autocomplete="address-level2"/>
Niet doen
Limiteer het minimaal aantal in te voeren tekens.
Jo, Bo en X willen ook graag hun voornaam invullen.<label for="voornaam1">Je voornaam</label><input id="voornaam1" type="text" name="voornaam" minlength="3" autocomplete="given-name"/>
Aanvullingen of opmerkingen?
Deze richtlijnen worden onderhouden door het NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub met je suggesties.