Skip to content


What component has

Default roles and attributes

The list below describes roles and attributes that component already has.

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

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.

aria-label or aria-labelledbyRequired. 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.


Other recommendations

See more accessibility recommendations in the common Accessibility guide.

Released under the MIT License.

Released under the MIT License.