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.
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
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-expanded (state)
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
- aria-valuemax
- aria-valuemin
- aria-valuenow
- aria-valuetext
Name From
- author
Accessible Name Required
- True
Children Presentational
- True
Semantic HTML
Use the HTML5 <progress> tag.
<progress value="70" max="100">70 %</progress>