From cf171582b9e7edcc77f0447668784bfc9528bf76 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Thu, 18 Sep 2025 16:21:14 -0700 Subject: [PATCH 1/5] update understanding data 1. add temp link to `progressbar` working example 2. delete `role=marquee` reference as that role has no browser support 3. delete aria live with chat client as the `log` example is a chat client example --- understanding/understanding.11tydata.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/understanding/understanding.11tydata.js b/understanding/understanding.11tydata.js index fb9e83a3f1..f3a7010a56 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", From ae3c203502646788c1fd85e67c603d755c5d6676 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Sun, 12 Oct 2025 21:31:46 -0700 Subject: [PATCH 2/5] New progressbar technique MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ref: #4378 This is a technique that’s been listed as a “future link” probably since WCAG 2.1 was released. --- ...rogressbar-role-with-a-status-message.html | 50 ++++++ .../aria-role-status-progressbar/index.html | 162 ++++++++++++++++++ 2 files changed, 212 insertions(+) create mode 100644 techniques/aria/technique-using-progressbar-role-with-a-status-message.html create mode 100644 working-examples/aria-role-status-progressbar/index.html 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. +
  2. Check that there is a suitable ARIA live region in the code.
    3. +
  3. Using a screen reader, check that announcements are made that communicate the progress of the task.
    4. +
+
+
+

Expected Results

+
    +
  • #1, #2, and #3 are true.
    • +
+
+
+ + \ No newline at end of file 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 From 2eb74131c9706bfc8c6171ba2258d2f79c1d47f2 Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Wed, 19 Nov 2025 12:09:05 -0800 Subject: [PATCH 3/5] added note about aria-value* attrs and status message --- ...chnique-using-progressbar-role-with-a-status-message.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 index da0f7a5b2d..a73242507a 100644 --- a/techniques/aria/technique-using-progressbar-role-with-a-status-message.html +++ b/techniques/aria/technique-using-progressbar-role-with-a-status-message.html @@ -14,7 +14,10 @@

Description

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.

+ +

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. 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 

From a03e1431c7abd97012da20f7198aac697409bb37 Mon Sep 17 00:00:00 2001
From: Francis Storr 
Date: Fri, 21 Nov 2025 09:30:16 -0800
Subject: [PATCH 4/5] give the technique its new reference

---
 ...-progressbar-role-with-a-status-message.html => ARIA25.html} | 2 +-
 understanding/understanding.11tydata.js                         | 2 +-
 working-examples/aria-role-status-progressbar/index.html        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename techniques/aria/{technique-using-progressbar-role-with-a-status-message.html => ARIA25.html} (92%)

diff --git a/techniques/aria/technique-using-progressbar-role-with-a-status-message.html b/techniques/aria/ARIA25.html
similarity index 92%
rename from techniques/aria/technique-using-progressbar-role-with-a-status-message.html
rename to techniques/aria/ARIA25.html
index a73242507a..f418066669 100644
--- a/techniques/aria/technique-using-progressbar-role-with-a-status-message.html
+++ b/techniques/aria/ARIA25.html
@@ -15,7 +15,7 @@ 
Description

 				
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 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. 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 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.

 
diff --git a/understanding/understanding.11tydata.js b/understanding/understanding.11tydata.js
index ae2cd71303..e2aae1918e 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 the ARIA progressbar role with a status message',
+              "ARIA25",
               {
                 and: ["ARIA22", "G193"],
                 andConjunction: "in combination with",
diff --git a/working-examples/aria-role-status-progressbar/index.html b/working-examples/aria-role-status-progressbar/index.html
index a1991904a0..c54eacd9ae 100644
--- a/working-examples/aria-role-status-progressbar/index.html
+++ b/working-examples/aria-role-status-progressbar/index.html
@@ -77,7 +77,7 @@
 	
 	
 		
Working example - Using the ARIA progressbar role with a status message

-		
This working example relates to technique XXXXXX

+		
This working example relates to technique ARIA25.

 		
 		

 			
Uploading document: report.pdf


From 8ef4b1b8fcf1849edea810bc249470441c2064e4 Mon Sep 17 00:00:00 2001
From: Francis Storr 
Date: Fri, 21 Nov 2025 09:44:28 -0800
Subject: [PATCH 5/5] de-versioning link to live region roles

---
 techniques/aria/ARIA25.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/techniques/aria/ARIA25.html b/techniques/aria/ARIA25.html
index f418066669..7cfb2a490a 100644
--- a/techniques/aria/ARIA25.html
+++ b/techniques/aria/ARIA25.html
@@ -8,7 +8,7 @@
       
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.

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