Accessible Progress Bars
Progress bars show the completion status of a current task. It may be fairly static
for the page (e.g. A page with a progress bar indicating the delivery status of a package is unlikely
to be updated in real-time after the page is loaded), then you won't need an aria-live region that
announces the status value. However, if it is a task that is being reported in real-time (e.g.
how long it will take to upload a movie file to a web server), then you will want that information
updated to the user in real-time as it happens. In the latter case, the developer and UX designer should
think about how immediately this information should be given to screen reader users since this information causes
a bit of noise, and set the aria-live level appropriately. If the user is not going to be doing anything
else on the screen while the action is happening and needs immediate updates, use aria-live="assertive".
If the user is going to be doing other things on the page while the progress bar is updating, use "polite"
instead.
HTML5 progress bar
This is the best solution to use, especially when building from scratch.
This progress bar uses aria-live regions to update the status of the progress bar. It works for all screen readers. It is the most bulletproof way to implement a progress bar if you need to ensure that screen reader users are updated as soon as the progress bar value changes. Be mindful of how often the ARIA live region updates, so it doesn't cause unnecessary noise for screen reader users.
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that make the example accessible.
This progress bar uses the screen reader's native functionality to read the progress bar by setting the keyboard focus on the bar when incrementing. This doesn't announce updates on Mac OSX Voiceover with Safari.
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that make the example accessible.
ARIA role="progressbar" Example
If you are already using a component similar to this in existing work that is not accessible, go to the developer walkthrough in this section to see how we made our implementation accessible.
This progress bar uses aria-live regions to update the status of the progress bar. The same rules for updating this aria-live region apply as the HTML5 example above.
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that make the example accessible.
This progress bar uses the screen reader's native functionality to read the progress bar by setting the keyboard focus on the bar when incrementing. At the time of this writing, this doesn't work in Voiceover on OSX <= 10.15.7
Advanced ARIA progressbar role example
This example is provided for informational purposes only, since this solution does not work for all web browser/screen reader combinations (e.g. Safari with VoiceOver on OSX <= 12.13.1 and Safari with VoiceOver on iOS <= 14.6
This is when you want to add text descriptions to the values inside a progress bar. The example below is just one way this can be implemented.
This uses the aria-valuetext to update the progress bar.
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that make the example accessible.