Accessible Progress Bars
Progress bars show the completion status of a current task. It may be something that is 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 log 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 how immediate this information should be given to screen reader users, since this information cause
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 in 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 readers 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 makes the example accessible.
This progress bar uses the screen reader's native functionality to read the progress bar by setting 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 makes the example accessible.
ARIA role="progressbar" Example
If you already are using a component similar to this in existing work that is not accessible, go to the developer walkthrough of this section to see we made our implementation accessible.
This progress bar uses aria-live regions to update the status of the progress bar. Same rules for updating this aria-live region applies 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 makes the example accessible.
This progress bar uses the screen reader's native functionality to read the progress bar by setting 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 makes the example accessible.