Technique ARIA25:Using the ARIA `progressbar` role with a status message

About this Technique

This technique relates to 4.1.3: Status Messages (Sufficient).

This technique applies to content using WAI-ARIA.

Description

This technique demonstrates how to use the ARIA progressbar role with an ARIA live region to provide progress information for a file upload.

Example

This example simulates the progress of uploading a document. The progress of the upload is communicated to the user with an ARIA progressbar and visible text underneath the progress bar. The visible text is contained in an element with an aria-live="polite" attribute. This attribute tells screen readers to announce updates made to the content of the element.

Note

The aria-valuemin, aria-valuemax, and aria-valuenow values on the progressbar component programmatically communicate the progress of the upload, but because the progressbar role is not a live region, screen readers won't announce updates to those values as they change. Programmatically connecting a status message to the progressbar to announce the changes in value, and a final "upload complete" message, creates a better user experience.

The following code can also be seen as a working example.

<p id="upload-progress-label">Uploading document: <strong>report.pdf</strong></p>
  <div 
    aria-describedby="progress-text"
    aria-labelledby="upload-progress-label"
    aria-valuemax="100"
    aria-valuemin="0" 
    aria-valuenow="0" 
    id="upload-progress"
    role="progressbar">
</div>	
<p id="progress-text" aria-live="polite">0% complete</p>

Tests

Procedure

Check that the visual progress bar element has a role="progressbar" attribute.
Check that there is a suitable ARIA live region in the code.
Using a screen reader, check that announcements are made that communicate the progress of the task.

Expected Results

#1, #2, and #3 are true.