Technique ARIA22:Using `role=status` to present status messages

About this Technique

This technique relates to:

4.1.3: Status Messages (Sufficient using a more specific technique)
4.1.3: Status Messages (Sufficient, together with G193: Providing help by an assistant in the Web page)

This technique applies to content using WAI-ARIA.

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

Example 1: 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" aria-atomic="true">5 results returned.</div>

Working example: role=status on search results

Example 2: 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 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>

Working example: role=status on a shopping cart

Tests

Procedure

For each status message:

Check that the container destined to hold the status message has a role attribute with a value of status before the status message occurs.
Check that when the status message is triggered, it is inside the container.
Check that elements or attributes that provide information equivalent to the visual experience for the status message (such as a shopping cart image with proper alt text) also reside in the container.

Expected Results

#1, #2 and #3 are true.

Technique ARIA22:Using role=status to present status messages