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, and 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.

Roles, states, and properties in a progress bar

  • role="progressbar"
  • tabindex = [0 | -1]
  • aria-valuenow = "0"
  • aria-valuemin = "0"
  • aria-valuemax = "[max value define in default options]"
  • aria-describedby = "[instruction ID]"
  • role = "region"
  • aria-live = "assertive"
  • aria-atomic = "additions"
  • aria-hidden = "[true | false]"
Suggested Reading: For more about accessible progress bars, see WAI-ARIA 1.1: ProgressbarLinks to an external site.

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, copying the accessibility/WAI-ARIA code described below to fix the accessibility of the progress bar before completing Activity 7 on the page that follows.Skip JSFiddle


WAI-ARIA to Make the Progress Bar Accessible

Key Point: For the exercise in Activity 7: Accessible Progress Bar, aim to have the progress bar function in ChromeVox, but be aware that solutions described here will not work in other screen readers.

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 (Links to an external site.)Links to an external site. file for the workaround, though for Actvity 7, be sure to start from the ik_progressbar.js (Links to an external site.)Links to an external site. 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 (Links to an external site.)Links to an external site. 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 "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, replacing 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, replacing the .data() work-around, 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, which also triggers the notify() function when one of these keys is pressed, outputting 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.

Monday, October 8, 2018 - 10:57 Submitted 2 months 2 days ago by Anonymous (not verified).