Stappenindicator
De stappenindicator toont de gebruiker visueel waar hij zich in een aanvraagproces bevindt. Deze weergave wordt gebruikt bij processen die bestaan uit 3 stappen of meer. De voormalige weergave met gele blokken wordt niet meer gebruikt in nieuwe applicaties.
De stappenindicator bestaat voor processen van meer dan 2 stappen en bestaat uit drie onderdelen:
- Naam van het aanvraagproces
- Stapnummer en stapnaam
- Visuele weergave van de procesvoortgang
Toegankelijkheid
Om de procesvoortgang zo toegankelijk mogelijk te maken is het volgende gedaan:
- De stappen zijn semantisch list items. Een screen reader leest dit dan voor als een 'lijst met 6 items'.
- Na het stapnummer is een verborgen visually-hidden tekst 'van 6' toegevoegd.
- Visueel zijn de naam van het aanvraagproces en stapnummer en stapnaam losse onderdelen, maar semantisch is het één H1 header element. Door een screen reader wordt het voorbeeld voorgelezen als: 'Aanvragen registratie als medewerker stap 1 van 6: Contactgegevens'.
- Bezochte stappen hebben een visually-hidden tekst 'Voltooid' en de actieve stap een visually-hidden tekst 'Huidige stap'.
- De klikbare stapnummers zijn tabbaar met een outline op de hele cirkel.
- Het list item van de actieve stap heeft de eigenschap
aria-current="true". - De klikbare stapnummers vormen herhalende content. In de DOM-volgorde staan de stapnummers vóór de H1, terwijl ze visueel ná de H1 worden weergegeven. Bij gebruik in applicaties, met name in Single Page Applications, is het na stapnavigatie vaak nodig om de focus op het H1-element te plaatsen, zodat de focus direct ná de herhalende content terechtkomt.
Weergave van korte processen
Wanneer er sprake is van een proces van 2 stappen dan wordt de procesvoortgang samengevoegd met de staptitel en wordt de visuele weergave niet getoond. De naam van de stap wordt dan bijvoorbeeeld 'Stap 1 van 2: Contactgegevens'.