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>
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.