Status Messages

What it means

The intent of this success criterion is to make users aware of important changes in content that are not given focus, and to do so in a way that doesn't unnecessarily interrupt their work. The intended beneficiaries are blind and low vision users of assistive technologies with screen reader capabilities. An additional benefit is that assistive technologies for users with cognitive disabilities may achieve an alternative means of indicating (or even delaying or suppressing) status messages, as preferred by the user. The scope of this success criterion is specific to changes in content that involve status messages. A status message is a defined term in WCAG. There are two main criteria that determine whether something meets the definition of a status message: Information can be added to pages which does not meet the definition of a status message. For example, the list of results obtained from a search are not considered a status update and thus are not covered by this success criterion. However, brief text messages displayed about the completion or status of the search, such as "Searching...", "18 results returned" or "No results returned" would be status updates if they do not take focus or cause a page refresh. Examples of status messages are given in the section titled Status message examples below.

Failing example

<!-- Fails: success toast injected into DOM silently -->
<div id="toast" class="toast">Item added to cart</div>
<script>
  document.getElementById("toast").textContent = "Added!";
</script>

How to fix it

<!-- Pass: ARIA live region announced to screen readers -->
<div id="toast" role="status" aria-live="polite"
     aria-atomic="true" class="toast"></div>
<script>
  // Injecting text into a live region triggers announcement
  document.getElementById("toast").textContent = "Item added to cart";
</script>

More Robust criteria

• 4.1.2Name, Role, ValueA