Progress Tracker
Progress trackers visually guide users toward completion and gives them a sense of achievement. These components are typically used in scenarios where users need to track their progress toward a set goal, such as task completion, milestones, or performance targets.
On this page
Use Cases
The user should be able to:
- Have clear labels in order to communicate with users and provide context. Labels must be persistent. The label cannot be visually hidden. Relying on color or shape alone excludes users with visual impairments or color blindness cannot perceive color or subtle changes in shape effectively. In addition, turning off the label violates WCAG 2.1 Guideline 1.3.1: Info and Relationships and WCAG 2.1 Guideline 1.4.1: Use of Color. If the progress value is only visual, screen readers cannot interpret and announce it without a an accessible label.
- Describes what the indicator represents to assistive technology. The selected index number will be appended to the label.
Interaction and Style
Relevant WCAG Requirements
Info and Relationships
Ensure information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. This means use proper HTML elements to structure your content, so it makes sense when read by assistive technology.
WCAG 2.1 Understanding 1.3.1Meaningful Sequence
Present content in a meaningful order. This ensures that the content makes sense when read by a screen reader or other assistive technology, even when styles are turned off.
WCAG 2.1 Understanding 1.3.2Use of Color
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
WCAG 2.1 Understanding 1.4.1Contrast (Minimum)
Text and images of text must have a contrast ratio of at least 4.5:1...
WCAG 2.1 Understanding 1.4.3Reflow
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for vertical scrolling content at a width equivalent to 320 CSS pixels; or for horizontal scrolling content at a height equivalent to 256 CSS pixels.
WCAG 2.1 Understanding 1.4.10Name, Role, Value
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
WCAG 2.1 Understanding 4.1.2
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.