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>

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.