From 4ab41bab26a3ce293c7c1df3c9f73c5275a2fc79 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Fri, 13 Dec 2024 23:42:03 +0100 Subject: [PATCH] Aria22 modification for aria-atomic (#1699) Addressing changes in response to #1137 Adding an explicit `aria-atomic="true"` in Technique [ARIA22: Using role=status to present status messages](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22) and the linked examples (search results, shopping cart) since the default behaviour of `role="status"` (reading the entire content of a changed container marked with `role="status"`) is currently not well supported. The change to search results example is actually unnecessary since the entire content is written into the container and thus exposed. So not sure whether it is better to skip that change, or change both examples for consistency's sake. Closes #1137 --------- Co-authored-by: Patrick H. Lauke Co-authored-by: Mike Gower --- techniques/aria/ARIA22.html | 8 ++++---- .../aria-role-status-searchresults/index.html | 2 +- working-examples/aria-role-status-shoppingcart/index.html | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/techniques/aria/ARIA22.html b/techniques/aria/ARIA22.html index 13b5c45310..e820b9b010 100644 --- a/techniques/aria/ARIA22.html +++ b/techniques/aria/ARIA22.html @@ -19,20 +19,20 @@

When to Use

Description

This technique uses the status role from the ARIA specification to notify Assistive Technologies (AT) when content has been updated with information about the user's or application's status. This is done by adding role="status" to the element that contains the status message. The aria live region role of status has an implicit aria-live value of polite, which allows a user to be notified via AT (such as a screen reader) when status messages are added. The role of status also has a default aria-atomic value of true, so that updates to the container marked with a role of status will result in the AT presenting the entire contents of the container to the user, including any author-defined labels (or additional nested elements). Such additional context can be critical where the status message text alone will not provide an equivalent to the visual experience. The content of the aria-live container is automatically read by the AT, without the AT having to focus on the place where the text is displayed. See WAI-ARIA status (role) for more details.

- +

Note that since role="status" is currently not treated as atomic by default in some environments, it is advisable to add an explicit aria-atomic="true" if the entire contents of the container should be announced.

Examples

Including a search results message

After a user presses a Search button, the page content is updated to include the results of the search, which are displayed in a section below the Search button. The change to content also includes the message "5 results returned" near the top of this new content. This text is given an appropriate role for a status message. A screen reader will announce "5 results returned".

-
<div role="status">5 results returned.</div>
+
<div role="status" aria-atomic="true">5 results returned.</div>

Working example: role=status on search results

Updating the shopping cart status

-

After a user presses an Add to Shopping Cart button, content near the Shopping Cart icon updates to read "1 items". The container for this text (in this case a <p>) is marked with the role of status. Because it adds visual context, the shopping cart image — with succinct and accurate alt text — is also placed in the container. Due to the default aria-atomic value, a screen reader will announce "Shopping cart, six items".

-
<p role="status" >
+				
After a user presses an Add to Shopping Cart button, content near the Shopping Cart icon updates to read "1 items". The container for this text (in this case a <p>) is marked with the role of status. Because it adds visual context, the shopping cart image — with succinct and accurate alt text — is also placed in the container. Due to the aria-atomic value, a screen reader will announce "Shopping cart, six items".

+
<p role="status" aria-atomic="true">
   <img src="shopping-cart.png" alt="Shopping Cart">
   <span id="cart">0</span> items
 </p>
diff --git a/working-examples/aria-role-status-searchresults/index.html b/working-examples/aria-role-status-searchresults/index.html
index ed7985ab7c..4b2f5f57fc 100644
--- a/working-examples/aria-role-status-searchresults/index.html
+++ b/working-examples/aria-role-status-searchresults/index.html
@@ -19,7 +19,7 @@ 
Using role=status to Provide Status Message on Search Results
 				
Results

 
-				

+				

 
 	
 		
diff --git a/working-examples/aria-role-status-shoppingcart/index.html b/working-examples/aria-role-status-shoppingcart/index.html
index a36fe2ac83..1c4cf71f59 100644
--- a/working-examples/aria-role-status-shoppingcart/index.html
+++ b/working-examples/aria-role-status-shoppingcart/index.html
@@ -17,7 +17,7 @@
 			
Using role=status to Provide Status Message on Shopping Cart

 			
This simple script demonstrates how a shopping cart counter is updated and surfaced using the aria status role. Here the role is placed on the paragraph containing the dynamically updated text, and the shopping cart image's alt provides additional context. Due to the default aria-atomic="true", a screenreader should announce "Shopping Cart # items" or (depending on browser compatibility) "# items" each time the Buy Pink Flamingos button is selected.
	
 			

-			
Shopping Cart

+			
Shopping Cart

 			0 items

 			
 			
Shop at our single-product store