• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Digital A11Y

Digital A11Y

Your Accessibility Partner

  • About
  • Articles
  • WAI-ARIA
  • WCAG
  • Resources
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact

WAI-ARIA: Role=Progressbar

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.

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>

Reference

W3C (opens new window)

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name
  • Knowbility looking for mentors in its Accessible Internet Rally
  • Understanding SC 2.5.2 Pointer Cancellation

Recent Comments

  • Al on Understanding SC 4.1.2 Name, Role, Value
  • Randy on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Understanding SC 1.4.12 Text Spacing
  • Raghavendra Satish Peri on Understanding SC 4.1.2 Name, Role, Value

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • Uncategorized
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y