ProgressBar

If the ProgressBar value is already shown as text adjacent to the ProgressBar, don't use a redundant label for the ProgressBar.

Edit in Figma

Accessibility and usability expectations

Vision

• When rendering multiple segments, ensure each segment has a 3:1 contrast ratio against adjacent segments and the background
• Do not rely on color alone to convey progress. Include text labels or other indicators for users who cannot perceive color differences
• If a visible label is provided, ensure the text meets the minimum contrast requirement of 4.5:1 for readability

Adaptability

• If the progress value is already displayed as adjacent text, the label should remain legible when resized up to 200%
• When zoomed to 400% or viewed at a width of 320px, content and functionality must remain fully available without horizontal scrolling
• The visual design should remain visible and usable in Windows High Contrast/Forced colors mode

Interaction

Keyboard

• The ProgressBar itself does not receive keyboard focus because it is a passive status indicator

Engineering for compatibility with assistive technology

Screen reader support

• ProgressBar are inherently visual elements. Provide a text description of progress for assistive technologies (e.g., “Tasks: 8 of 10 complete” for a single segment, or “Tasks: 80 done, 14 in progress, 6 open” for multiple segments)
• The ProgressBar must communicate the current value. Avoid: Using <progress> without accessible attributes such as aria-valuenow and aria-labelledby
• If the progress value is already displayed as adjacent text, avoid duplicating it with additional labels or ARIA attributes, as this can create redundant screen reader output
• A ProgressBar must include a programmatically associated text alternative that describes the current state to ensure assistive technology users receive equivalent information

Speech recognition

• The ProgressBar should have an accessible name that matches or includes the visible label, though this may not be necessary since it is not interactive

Built-in accessibility features

• By default, the component renders with role="progressbar", making it inherently recognizable by assistive technologies
• The component provides an accessible name via aria-label
• The component's state information is exposed through aria-valuenow, aria-valuemin, and aria-valuemax

Implementation requirements

• If custom colors are used, ensure a minimum contrast ratio of 3:1 between adjacent segments and the background
• This contrast requirement extends to multiple segments within the ProgressBar
• Ensure that legends or accompanying labels do not rely solely on color to convey meaning

How to test the component

Integration tests

• Verify the accessible name is correctly exposed
• Ensure the value updates dynamically as progress changes
• Confirm that the ProgressBar provides a visual indicator that meets color contrast requirements
• If custom colors are used, verify that each segment meets the minimum color contrast ratio of 3:1 against the background and adjacent segments
• Ensure the component reflows correctly when zoomed or resized

Component tests

• Verify that the component renders with role="progressbar" and the correct ARIA attributes: aria-valuenow, aria-valuemin, and aria-valuemax
• Ensure that the ProgressBar does not receive keyboard focus since it is a non-interactive status indicator