Developer What component has
Default roles and attributes
The list below describes roles and attributes that component already has.
| Attribute | Usage |
|---|---|
role="progressbar" | Defines an element that displays the progress status for tasks that take a long time. |
aria-valuenow="NUMBER" | Indicates the current progress value to assistive technologies. |
Considerations for developers
Recommended roles and attributes
The list below will help you to keep in mind the necessary roles and attributes to make our components fully accessible in the particular cases in your interfaces.
| Attribute | Usage |
|---|---|
aria-label or aria-labelledby | Required. Provides an accessible name for the ProgressBar. |
aria-valuetext="string" | Allows to represent the progress values in a convenient format, for example, announce absolute values beside percentages (example). |
tabIndex="0" | Includes the ProgressBar in the Tab sequence. Not mandatory, but can help enhance discoverability by making the element focusable. |
Resources
- Progressbar role (MDN)
- Progress indicator checklist (MagentaA11y)
- Progressbar role (W3C recommendations)
Other recommendations
See more accessibility recommendations in the common Accessibility guide.