Make Status Messages Announceable by Assistive Technologies

Disabilities Affected: Visual

Success Criterion: 4.1.3

Level: AA

For status messages that provide information on the success or results of an action, outcomes of interactions, busy states, or errors, the message must be programmatically determinable through role or properties so that assistive technologies can present them to the user without the message receiving focus.

Why It Matters

When content updates dynamically without a page reload (e.g., “Item added to cart,” “Search results updated,” “Form submitted successfully,” “Loading…”), users who cannot see the screen may not be aware of the change. Status messages need to be announced by screen readers without interrupting the user’s current workflow (i.e., without moving keyboard focus).

Fixing the Issue

Use ARIA live regions to wrap content that updates dynamically and needs to be announced. Common techniques include:

role=”status”: For general information updates (polite announcement – won’t interrupt).
role=”alert”: For important, time-sensitive information or errors (assertive announcement – may interrupt).
aria-live=”polite”: Similar to role=”status”.
aria-live=”assertive”: Similar to role=”alert”.
Inject the status message text content into the live region container when the event occurs. Ensure the container element is present in the DOM before the message is injected.

Good Code Example

Using role=”status” for a confirmation message:

Markup

<form id="add-to-cart-form">
  <button type="button" onclick="addItem()">Add Item to Cart</button>
</form>

<div role="status" id="cart-status-message" aria-live="polite"></div>

<script>
  function addItem() {
    // Logic to add item...
    const messageContainer = document.getElementById('cart-status-message');
    // Update the content of the live region
    messageContainer.textContent = "Item successfully added to your cart.";
    // Optionally clear the message after a delay
    setTimeout(() => { messageContainer.textContent = ""; }, 5000);
  }
</script>

Bad Code Example

Updating text visually without using a live region:

Markup

<form id="add-to-cart-form">
  <button type="button" onclick="addItem()">Add Item to Cart</button>
</form>

<div id="cart-status-message" style="color: green;"></div>

<script>
  function addItem() {
    // Logic to add item...
    const messageContainer = document.getElementById('cart-status-message');
    // Update the content - screen readers likely won't announce this change
    messageContainer.textContent = "Item successfully added to your cart.";
  }
</script>

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Learn More

Need Help with Compliance?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult