There are many variations of progressbars, some of which may not need to be a true progress bar at all.
Support varies by screen reader. It’s recommended to add full aria attributes, even when using a native
Use semantic HTML
This semantic HTML contains all accessibility features by default.
Inline dynamic loading waiting example
This example dynamically injects progress updates that will be read by a screen reader
aria-busy="true"has spotty support, but does indicate that the region is busy
aria-describedbyis allows the current progress to be read when the button is focused
aria-disabledreinforces that the save action is incomplete
role="statushas an implicit aria-live=”polite” of polite and
aria-atomic="true"meaning the entire content of the status will be read on each update
aria-label="Progress bar name"when there is not a visible title.
- If the progress bar is describing another region of the page, use
aria-describedby="progressbar-id"to connect the two elements.
- The state will be read out to the screen reader user by default.
- Progress bar is not usually focusable.