Code examples
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 <progress>
element.
Use semantic HTML
This semantic HTML contains all accessibility features by default.
<progress role="progressbar"
id="progress"
class="progress"
aria-label="File upload"
value="25"
aria-valuemin="0"
aria-valuenow="25"
aria-valuemax="100"
max="100">
25%
</progress>
Developer notes
Name
- Use
aria-label="Progress bar name"
when there is not a visible title.
Role
- Use
role="progressbar
Group
- If the progress bar is describing another region of the page, use
aria-describedby="progressbar-id"
to connect the two elements.
State
- The state will be read out to the screen reader user by default.
Focus
- Progress bar is not usually focusable.