Ga naar hoofdinhoud

Meerdere stappen in een formulier

Bestaat een formulier uit veel vragen, dan kan het gebruiksvriendelijk en overzichtelijk zijn om het formulier in meerdere stappen op te delen, of om een vraag per stap te stellen.

Of je een meerstappenformulier gebruikt hangt af van de hoeveelheid en de complexiteit van de vragen die je de bezoekers wilt stellen. Doe vooraf gebruikersonderzoek voordat je beslist een formulier in meerdere stappen op te delen. Adam Silver beschrijft zijn overwegingen in Better Form Design: One Thing Per Page (Case Study).

Kies je voor een opzet met meerdere stappen, dan is het volgende belangrijk:

Geef aan hoeveel stappen er zijn en in welke stap de gebruiker zich bevindt

Als een formulier meerdere stappen heeft, is het noodzakelijk dat een gebruiker weet in welke stap ze zich bevindt en hoeveel stappen er nog volgen. Dit geeft duidelijkheid en voorkomt onzekerheid bij de gebruiker.

Een goed patroon in tekst hiervoor is bijvoorbeeld de tekst: Stap 2 van 6 of Vraag 2 van 6.

Voeg deze informatie toe op twee plekken:

  • In de <title> in de <head> van de pagina.
  • Boven het formulier, bijvoorbeeld in het kopje van het formulier of vlak onder het kopje van het formulier.

Aanpassen van de <title> in de <head> geldt voor WCAG ook voor dynamisch gegenereerde formulieren en dus ook voor de verschillende stappen. Wanneer de gebruiker technisch gezien op dezelfde pagina blijft, en je met script de volgende formulierstap in beeld brengt, dan moet de paginatitel aangepast worden zodat die klopt bij de stap. Je kunt met script de titel aanpassen:

document.title = "Stap 3 van 6: Adresgegevens";

De stappen kort uitschrijven als tekst heeft de voorkeur boven een visuele weergave zoals in een progressbar. Tekst schaalt beter mee bij vergroting of op mobiele weergave. Bovendien is het sneller te lezen en wordt het beter gevonden. Lees hierover Using progress indicators op gov.uk.

Het duidelijk aangeven van het aantal stappen en de huidige locatie binnen de stappen is nodig om te voldoen de WCAG-succescriteria:

Doen

Beschrijf in de titel in welke stap van welk formulier de gebruiker is.

Met de titel bedoelen we hier het title-element. Bekijk de code voor een voorbeeld in HTML.

Niet doen

Voor elke (volgende) stap / dezelfde titel.

Met de titel bedoelen we hier het title-element. Bekijk de code voor een voorbeeld in HTML.

Doen

Stap in het kopje van het formulier.

Stap 2 van 3, uw gegevens

Doen

Stap onder het kopje van het formulier.

Uw gegevens

Stap 2 van 3

Doen

Stap onder het kopje van het formulier.

Gebruik hgroup om het kopje en de stappen semantisch aan elkaar te koppelen.

Uw gegevens

Stap 2 van 3

Niet doen

Stap boven het kopje van het formulier.

Stap 2 van 3

Uw gegevens

Plaats de informatie over waar de gebruiker is in de stappen boven het formulier

Plaats tekst en uitleg die hoort bij het formulier buiten het <form> element. Dus zet informatie over de stappen boven en niet binnen het <form> element. Dan is de kans dat screenreadergebruikers deze informatie missen het kleinst. Het waarom staat uitgelegd bij de richtlijnen over descriptions.

Het voordeel van een formulier in meer stappen is, dat je makkelijker uitgebreide informatie per stap kunt toevoegen boven het formulier. Dat scheelt de complexiteit van eventueel gebruik van ARIA om tekst te laten voorlezen bij een formulierveld.

Het aangeven van de hoeveelheid stappen boven het formulier is nodig om te voldoen aan het WCAG-succescriterium 1.3.2 Betekenisvolle volgorde (niveau A).

Doen

Info boven het form element.

Uw gegevens

Stap 2 van 3

[... inhoud formulier …]

Niet doen

Info binnen het formulier.

Uw gegevens

Stap 2 van 3

[... inhoud formulier …]

Geef op een consistente plek, met een consistente benaming, aan hoe de gebruiker navigeert binnen de stappen, bijvoorbeeld:

  • "Vorige stap", boven het formulier
  • "Volgende stap" (of als laatste stap: "Versturen") als submitbutton

Zorg er dus voor dat links en buttons binnen de formulieren op dezelfde plaats staan en dat ze ook een consistente naam hebben. Door consistentie heeft de gebruiker minder moeite de navigatie te begrijpen en weet ook beter wat er gaat komen na een keuze.

Consistent gebruik van navigatie in een formulier is nodig om te voldoen aan het WCAG-succescriterium: 3.2.3 Consistente navigatie (niveau AA).

Doen

Benoem de stappen consistent.

Vorige stap

[...]

Niet doen

Verschillen tussen hoe de vorige en volgende stap worden benoemd.

Gebruik ofwel ‘terug’/‘verder’ ofwel ‘Vorige stap’/‘Volgende stap’.

Terug

[...]

Bied als laatste stap een opsomming aan van alle ingevoerde gegevens

Geef de gebruiker de zekerheid dat alles goed is ingevoerd. Maak de laatste stap van een meerstappenformulier dan ook een opsomming van de ingevulde gegevens en bied een manier aan om deze gegevens te wijzigen.

Dit geeft de bezoeker de zekerheid dat alles goed is ingevuld voordat deze het formulier verzendt en verkleint de kans op fouten.

Het aanbieden van een controlestap in een multistappenformulier is altijd een goed idee. En voor formulieren met een wettelijk verplichting of financiële transactie is een controlestap nodig om te voldoen aan het WCAG-succescriterium 3.3.4 Foutpreventie (wettelijk, financieel, gegevens) (niveau AA).

Geef duidelijk aan wanneer het formulier verzonden gaat worden

Maak duidelijk aan de gebruiker wanneer het formulier echt gaat worden verzonden. Geef ook de gebruiker, als laatste stap, een samenvatting van wat is ingevuld met de mogelijkheid om te wijzigen.

De tekst van de laatste submitbutton kan dan bijvoorbeeld “Versturen” zijn, afhankelijk van de inhoud van het formulier.

Dit geeft de gebruiker zekerheid: “ik kan nog wat wijzigen” of “nu gaat het formulier echt verzonden worden”.

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? Deel je mening op GitHub met je suggesties.