Progress indicator
Progress indicators show users the number of steps in a task, where they are up to in the process and how much is left to do.
import { ... } from '@ag.ds-next/react/progress-indicator';Learn more about how to meet WCAG success criteria when implementing a progress indicator. This makes them accessible and inclusive for users of all abilities and situations.
The progress indicator component passed accessibility testing in 2022 and 2024.
Clear and descriptive links
Requirements
- Each navigable step has clear, concise and descriptive link text.
- Each link label should be distinguishable from the others.
Benefits
- Screen reader users can understand the purpose of each link before activating it.
- All users can identify and navigate to between sections of the multi-page form.
WCAG references
Step status
Requirements
- Communicate status changes on screen and to assistive technologies.
- Use the appropriate status label, so that colour is not used as the only visual means of conveying the state of a step.
- Use the ‘Cannot start yet’ status for steps of the Progress indicator that can’t be completed’.
- On pages for steps that can’t be completed yet, provide a page alert explaining why.
Benefits
- Provides clear interaction feedback to all users.
- Helps users understand where they are up to in the process.
- Reduces anxiety and confusion by confirming completed tasks.
- Screen reader users can understand which step they’re on and how many steps remain.
- Assistive technology can convey the purpose of each step.
- Improves usability for voice control software users.
WCAG references
- Understanding success criterion 1.3.1 Info and relationships
- Understanding success criterion 1.4.1 Use of colour
- Understanding success criterion 4.1.2 Name, role, value