New Components
Progress bar
The progress bar is an interface component that visually indicates the advancement of an ongoing task, such as a file upload or download. It is generally presented as a horizontal bar that fills proportionally to the rate of advancement reached. When the advancement cannot be measured, it takes an indeterminate form that only signals that the task is running. The component is not interactive: it does not receive keyboard focus and does not trigger any action.
When to use a progress bar
- A long, measurable operation: an upload, an export, a job whose progress is known.
- Progress through a journey: step 3 of 5 in a multi-page form.
- An open-ended wait: the value-less variant says something is happening, without promising a duration.
When not to use one
- An instant operation: under a second, the bar flashes without telling anyone anything.
- To set a value: a progress bar is read, not operated. To choose a value, use a slider.
- For a fixed score or ratio: a gauge that does not move is not progress; text is often enough.
Modes of action
- Mouse: none. The bar is a display, it does not respond to clicks.
- Keyboard: none. It does not take focus and does not enter the tab order.
- Screen reader: the native progress element already carries the role and the value; numeric progress is announced in steps through a live region.
Content
- A label naming the operation: "Uploading report.pdf", not "Loading", especially when the page holds several.
- A visible percentage: the figure goes with the bar, it does not replace it.
- An explicit ending: success is spelled out, a full bar is not enough.
Keywords
- Progress bar: a display of how far an operation has got, determinate or not.
- progress: the native HTML element, which already carries the progressbar role and the current value.
- Indeterminate progress: with no value attribute, the bar says something is happening without putting a figure on it.
- Forced colours: a display mode where the system replaces author colours with its own palette.
Breakdown of the components
The demonstration brings together both forms, determinate and indeterminate.
The bar itself
- The progress element brings the role and the value: no ARIA attribute is added, and none should be.
- With no value attribute the bar is indeterminate. That is the only difference between the two forms.
- As soon as you paint the track and the filled part yourself, forced colours mode needs a pair of system colours, otherwise both fall back on the same one and the bar turns into a plain rectangle (WCAG 1.4.11).
Announcing progress
- The value is announced in steps of 25 % through a live region. Announcing every percentage would flood the screen reader (WCAG 4.1.3).
- The announcement names the operation: on a page holding two bars, a bare percentage does not say what it refers to.
- The start button switches to aria-disabled while the job runs: it stays focusable and says an upload is already under way, instead of swallowing the activation in silence.
Screen reader
- The bar is not focusable: the information travels through the label and the live region.
- The label is bound to the bar with the for attribute, just as for a form field.
- The end of the operation is announced in words, not only by a last percentage.
- The live region exists from page load, and it is empty.
The progress bar is a non-interactive component: it does not receive keyboard focus and has no keyboard interaction of its own. It remains reachable through the virtual cursor of screen readers.
| Key | Function |
|---|---|
| Not applicable | The progress bar does not receive focus and does not respond to any keyboard key. It is reachable through the virtual cursor of screen readers, and the advancement is conveyed by the associated live region, without any focus movement. |
Note: if the task can be interrupted, the cancel button is an element distinct from the progress bar: it is reachable with the Tab key and operable with Enter or Space. See the Buttons component page for its keyboard interactions.