diff --git a/techniques/aria/technique-using-progressbar-role-with-a-status-message.html b/techniques/aria/technique-using-progressbar-role-with-a-status-message.html new file mode 100644 index 0000000000..da0f7a5b2d --- /dev/null +++ b/techniques/aria/technique-using-progressbar-role-with-a-status-message.html @@ -0,0 +1,50 @@ + + + + + Using the ARIA progressbar role with a status message + + +

Using the ARIA progressbar role with a status message

+
+

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

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

Expected Results

+ +
+
+ + \ No newline at end of file diff --git a/understanding/understanding.11tydata.js b/understanding/understanding.11tydata.js index 8108fc008f..ae2cd71303 100644 --- a/understanding/understanding.11tydata.js +++ b/understanding/understanding.11tydata.js @@ -1368,7 +1368,7 @@ export default function (data) { "Situation C: If a status message conveys information on the progress of a process:", techniques: [ "ARIA23", - 'Using role="progressbar" (future link)', + 'Using the ARIA progressbar role with a status message', { and: ["ARIA22", "G193"], andConjunction: "in combination with", @@ -1377,9 +1377,7 @@ export default function (data) { }, ], advisory: [ - "Using aria-live regions with chat clients (future link)", 'Using aria-live regions to support 1.4.13 Content on Hover or Focus (future link)', - 'Using role="marquee" (future link)', 'Using role="timer" (future link)', { id: "ARIA18", diff --git a/working-examples/aria-role-status-progressbar/index.html b/working-examples/aria-role-status-progressbar/index.html new file mode 100644 index 0000000000..a1991904a0 --- /dev/null +++ b/working-examples/aria-role-status-progressbar/index.html @@ -0,0 +1,162 @@ + + + + + Working example - Using the ARIA progressbar role with a status message + + + + +

Working example - Using the ARIA progressbar role with a status message

+

This working example relates to technique XXXXXX

+ +
+

Uploading document: report.pdf

+
+
+

0% complete

+ +
+ + + + \ No newline at end of file