Using the progressbar role
This technique demonstrates how to use the
progressbar role and describes the effect it has on browsers and assistive technology.
progressbar role should be used for an element that displays the progress status for a task that take a long time or consists of several steps.
A progressbar indicates that the user's request has been received and the application is making progress toward completing the requested action. If the actual value of the progressbar can be determined, the developer has to indicate this progress using the
aria-valuemax attributes. If the progress value is indeterminate, the developer should omit the
As the task progresses, the
aria-valuenow value has to be updated dynamically to indicate this progress to assistive technology products.
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.
aria-valuenowas a percent of the range between the value of
aria-valuetextis 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.
progressbarhave an implicit
Screen readers should announce the progress updates as they occur. If the progress bar is labeled, the label text should be mentioned as well.
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Step 2: Copying files... " aria-valuemax="100"> Step 2: Copying files... </div>
TBD: Add support information for common UA and AT product combinations