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 @@ + + +
+ +progressbar role with a status messageThis technique demonstrates how to use the ARIA progressbar role with an ARIA live region to provide progress information for a file upload.
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>
+ role="progressbar" attribute.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 @@
+
+
+
+
+ progressbar role with a status messageThis working example relates to technique XXXXXX
+ +Uploading document: report.pdf
+0% complete
+ +