diff --git a/techniques/aria/aria-status-role.html b/techniques/aria/aria-status-role.html new file mode 100644 index 00000000..6aca1d07 --- /dev/null +++ b/techniques/aria/aria-status-role.html @@ -0,0 +1,81 @@ + + +
+This technique relates to: +
+ The purpose of this technique is to notify Assistive Technologies (AT) when content has been updated with information about the user's or application's status. 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 an aria-atomic
value of true
, so that updates to the region marked with a role of status
will result in the AT presenting the entire contents of the region to the user, including any author-defined label. The content within the aria-live region is automatically read by the AT, without the AT having to focus on the place where the text is displayed. See WAI-ARIA 1.1 status (role) for more details.
+
+
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 "Five results returned".
+
+
+ 5 results returned.
+
+
+ Working example: link
+After a user presses an Add to Shopping Cart button, a section of content near the Shopping Cart icon updates the text to read "6 items". The div
containing this text is marked with the role of status
. For maximum compatibility with current assistive technology and user agents, the default aria-live
value is explicitly set. Because the shopping cart icon adds visual context, a label is added with aria. A screen reader will announce "Shopping cart, six items".
+
+ 6 items
+
+
+ Working example: link
+status
.