What component has

Default roles and attributes

The following list describes roles and attributes that the 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 following list 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

Find more accessibility recommendations in the common Accessibility guide.