Widget: Progress Bar

Details

Implementing This Widget

Implement the Progress Bar widget when you want to provide either a bounded or unbounded progress bar that is accessible on your web page or application.

To implement the Progress Bar widget:

1. Pass an object with a single key, bounded, into deque.createProgressBar().
2. If you want the progress bar to be bounded, set the key value to true, then specify a setValue number.

   The progress bar has a function called 'setValue' which takes a number between 0 and 1 and sets the value to 100* that number (to represent percent).

3. If you want the progress bar to be unbounded, set the bounded key value to false. If bounded is false, the progress bar simply does nothing.

Expected Operation and Accessibility Features

The first progress bar fills up from 0 to 100 over the course of several seconds. Click the button to restart it. The second progress bar is unbounded and will never finish.

Validation and Developer Notes

In order to validate this control, you must test it manually with a keyboard, a mouse, and a screen reader.

If you look at the source code of these examples, you'll see that the progress bars can be used as the value for aria-describedby on some other element. That element should also specify aria-busy as "true".

Example Implementation Reference

To view an implementation of this widget, see Progress Bar widget example.