Step by step navigation

[timpaul]

Use this issue to discuss the step by step navigation pattern in the GOV.UK Design System.

GDS builds step by step navigation journeys in collaboration with departments. This pattern is for testing in your prototype only.

You cannot publish step by step navigation you’ve created yourself on GOV.UK.

Email modelling-services@digital.cabinet-office.gov.uk as soon as possible if you think your service would fit into a step by step journey.

[CharlotteDowns]

We ran an external accessibility audit for some of the components and patterns in GOV.UK Frontend in May 2023. In that audit, we included an example of the Step-by-step pattern. We’re adding results from that audit here so that we can:

• document, discuss and address the findings
• inform future contributors of the findings

Two accessibility issues raised

Issue 1: WCAG A

'or' headings are placed at the same level as step headings, but should be under steps (h3)

The step by step navigation page consists of an ordered list, informing users of screen reading assistive technologies that the content is presented in a step by step process and a specific order. However, the list items have been provided with ‘list style: none;’ meaning that the steps have been removed from the list and rely on the heading text instead.
The two ‘Or’ steps have been marked up as level 2 headings as well as the other headings, which means that they do not programmatically relate to the previous step to which they offer the alternative for.

More detail in this issue:

• #2794

Issue 2: Usability

The numbers aren't part of the information in the expand/collapse section heading info. Add it in?

The step by step navigation page consists of headings containing buttons as the components used to expand the content. However, the step number content is not included within the button elements. This means that the step information is only conveyed when viewing them as headings and not as forms.
More detail in this issue:

• #3687

[RichardBradley]

Is there any code support for prototypes that want to test the "contents" HTML?

Like the contents list at the top of this page https://www.gov.uk/elections-in-the-uk

I can't find any HTML or CSS for it in the plugin https://github.com/alphagov/govuk-prototype-kit-step-by-step
nor is it a component in govuk-frontend