An element that displays the progress status for tasks that take a long time.

Description

An element that displays the progress status for tasks that take a long time.

A progressbar indicates that the user’s request has been received and the application is making progress toward completing the requested action. The author SHOULD supply values for aria-valuenow, aria-valuemin, and aria-valuemax, unless the value is indeterminate, in which case the author SHOULD omit the aria-valuenow attribute. Authors SHOULD update these values when the visual progress indicator is updated. If the progressbar is describing the loading progress of a particular region of a page, the author SHOULD use aria-describedby to point to the status, and set the aria-busy attribute to true on the region until it is finished loading. It is not possible for the user to alter the value of a progressbar because it is always readonly.

Note: Assistive technologies generally will render the value of aria-valuenow as a percent of a range between the value of aria-valuemin and aria-valuemax, unless aria-valuetext is specified. It is best to set the values for aria-valuemin, aria-valuemax, and aria-valuenow in a manner that is appropriate for this calculation.

Role=Progressbar Example

HTML Example

<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" />

HTML5 Example

<!DOCTYPE html><html><head><title>Gracefully degrading progress bar</title></head><body><progress id="progress-bar" value="0" max="100">0% complete</progress><button id="update-button">Update</button></body></html>

Supporting JavaScript

… and here is the JavaScript code that will ensure the progress bar still works in older browsers:

var progressBar = document.getElementById("progress-bar");
// Check to see if the browser supports the HTML5 <progress> tag.
var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined");

function setupProgress() {

if (!supportsHTML5Progress) {


// HTML5 <progress> isn't supported in this browser, so we need to add

// ARIA roles and states to the element.

progressBar.setAttribute("role", "progressbar");

progressBar.setAttribute("aria-valuemin", 0);

progressBar.setAttribute("aria-valuemax", 100);

}

}
function updateProgress(percentComplete) {

if (!supportsHTML5Progress) {

// HTML5 <progress> isn't supported by this browser,

// so we need to update the aria-valuenow attribute

progressBar.setAttribute("aria-valuenow", percentComplete);

} else {

// HTML5 <progress> is supported, so update the value attribute instead.

progressBar.setAttribute("value", percentComplete);

}
progressBar.textContent = percentComplete + "% complete";

}
function initDemo() {

setupProgress(); // Setup the progress bar.
// Bind a click handler to the button, which will update the progress bar to 75%.

document.getElementById("update-button").addEventListener("click", function (e) {

updateProgress(75);

e.preventDefault();

}, false);

}

initDemo();

HTML Example 2

<progress role="progressbar" value="25" max="100">25%</progress>

Characteristics

Superclass Role

range

Related Concepts

status

Inherited States and Properties

Name From

author

Accessible Name Required

True

Children Presentational

True

Semantic HTML

Use the HTML5 <progress> tag.

<progress value="70" max="100">70 %</progress>

Reference

WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=progressbar.