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.
- Plaats informatie over de stappen boven het formulier.
- Zorg voor een consistente navigatie en benaming van links en buttons.
- Bied als laatste stap een opsomming aan van alle ingevoerde gegevens.
- Geef duidelijk aan wanneer het formulier verzonden gaat worden.
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:
- 1.3.2 Betekenisvolle volgorde (niveau A).
- 2.4.2 Paginatitel (niveau A), deze richtlijn geldt ook voor dynamische pagina’s.
- 3.2.3 Consistente navigatie (niveau AA)
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.<title>Stap 2 van 3, uw gegevens - Gemeente voorbeeld</title>
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.<title>Contact opnemen - Gemeente voorbeeld</title>
Doen
Stap in het kopje van het formulier.
Stap 2 van 3, uw gegevens
<h2 class="utrecht-heading-2">Stap 2 van 3, uw gegevens</h2>
Doen
Stap onder het kopje van het formulier.
Uw gegevens
Stap 2 van 3
<h2 class="utrecht-heading-2">Uw gegevens</h2><p>Stap 2 van 3</p>
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
<hgroup><h1 class="utrecht-heading-1">Uw gegevens</h1><p>Stap 2 van 3</p></hgroup>
Niet doen
Stap boven het kopje van het formulier.
Stap 2 van 3
Uw gegevens
<p>Stap 2 van 3</p><h2 class="utrecht-heading-2">Uw gegevens</h2>
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
<h2 class="utrecht-heading-2">Uw gegevens</h2><p>Stap 2 van 3</p><form>[... inhoud formulier …]</form>
Niet doen
Info binnen het formulier.
Uw gegevens
<h2 class="utrecht-heading-2">Uw gegevens</h2><form><h3 class="utrecht-heading-3">Stap 2 van 3</h3>[... inhoud formulier …]</form>
Zorg voor een consistente navigatie en benaming van links en buttons
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.
<p><a href="./stap-1" class="utrecht-link utrecht-link--html-a">Vorige stap</a></p>[...]<div><button>Volgende stap</button></div>
Niet doen
Verschillen tussen hoe de vorige en volgende stap worden benoemd.
Gebruik ofwel ‘terug’/‘verder’ ofwel ‘Vorige stap’/‘Volgende stap’.<p><a href="./stap-1" class="utrecht-link utrecht-link--html-a">Terug</a></p>[...]<div><button>Volgende stap</button></div>
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”.
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.