Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Step by step navigation #171

Open
timpaul opened this issue Nov 1, 2018 · 1 comment
Open

Step by step navigation #171

timpaul opened this issue Nov 1, 2018 · 1 comment
Labels
pattern Goes in the 'Patterns' section of the Design System

Comments

@timpaul
Copy link
Contributor

timpaul commented Nov 1, 2018

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 CharlotteDowns added the pattern Goes in the 'Patterns' section of the Design System label Oct 13, 2021
@CharlotteDowns
Copy link

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:

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:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pattern Goes in the 'Patterns' section of the Design System
Development

No branches or pull requests

3 participants