Technique technique-using-progressbar-role-with-a-status-message:Using the ARIA `progressbar` role with a status message

About this Technique

This technique is not referenced from any Understanding document.

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.

The following example can 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.