Progress Bars

Progress bars are typically implemented when a user has to wait for a process to complete, whether that may be waiting for an upload to finish, data to be compiled, a report to be generated, or any other process that takes more than a few seconds to complete.

For most users, there is generally a visual representation of progress, such as a status bar or a circular progress indicator. As a process progresses, a viewer can estimate when it will be complete. For blind users, however, the visual presentation provides no useful information, so they will need to be able to retrieve the current value some other way.

The following JSFiddle presents a typical progress bar widget. Review the JavaScript and HTML markup and test the progress bar presented under the result tab with ChromeVox to understand how it functions without any accessibility features added. You can work in JSFiddle itself by clicking the Edit in “JSFiddle” at the top, right-hand side. Copy the accessibility/WAI-ARIA code described below to fix the accessibility of the progress bar before completing Activity 7 on the page that follows.

WAI-ARIA to Make the Progress Bar Accessible

In this example, we have added WAI-ARIA to a progress bar, but due to limited support for the WAI-ARIA progressbar attributes by screen readers other than ChromeVox, there is also a workaround using the jQuery .data() function to output the current value for users of JAWS or NVDA screen readers. You can refer to the ik_progressbar_data.js file for the workaround. However, for Activity 7, be sure to start from the ik_progressbar.js file for the assignment submission. To experiment with the .data() version of the progress bar JavaScript file, you can adjust the reference to the file in the progressbar.html file.

First, as is typical, create some instructions describing how to operate the progress bar with a screen reader and keyboard and add them to the default options.

Update the init() function to add the required WAI-ARIA. First set tabindex="-1" to be sure the bar itself is not keyboard focusable by default, and associate the bar with the instructions so when the bar does receive focus the instructions are read. Set some default values for aria-valuemin, aria-valuenow, and aria-valuemax. Also, add keyboard access to the bar with an on(keydown) reference to the onKeyDown() function, described below.

Add to the notifications <div> live region attributes so when Space/Enter are pressed and the progress percent is added, or if “Loading Complete!” is added, they are read aloud by the screen reader.

Finally, create the <div> with instructions referenced by its ID with aria-describedby added to the bar <div> and hide it by default.

Replace the data(value) in the getValue() function, used to retrieve the current value of the progress bar when the Space bar or Enter keys are pressed, with an aria-valuenow attribute. This replaces the .data(value) needed to function with screen readers other than ChromeVox.

In the setValue() function, add in a tabindex="-1" to remove keyboard focus from the bar when the max value is reached and to add the “Loading Complete” message to the notification <div>. Finally, add either the current value of the progress on keypress or the max value (if progress is complete) to an aria-valuenow attribute. This replaces the .data() work-around, which is needed to function with screen readers other than ChromeVox.

Adding Keyboard Operability

Keyboard access for a progress bar is relatively simple. There is typically no mouse or keyboard interaction. One generally waits and, when progress is complete, continues on with some other action. For screen reader users, however, they will need to be able to get the current progress value using a keypress.

To allow the current value to be retrieved, set up the Enter and Space bar keyboard controls with the onKeyDown() function. This also triggers the notify() function. When one of those keys is pressed, it outputs the value to the notification <div> that we have set up as a live region.

Accessible Progress Bar in Action

Watch the following video to see how ChromeVox interacts with a progress bar. When the Run Demo button is pressed, instructions are provided on how to announce progress. Pressing the Space bar or Enter key announces the percentage progress at any given moment. When progress has finished, “Loading Complete” is announced. Aim to have the progress bar you update in the activity on the following page operate and announce like the one in the video.

Video: Accessible Progress Bar