Robust · 4.1 Compatible

Status Messages WCAG 4.1.3 · Level AA

In markup-based content, status messages that report results, progress, waiting states, or errors without changing context must be programmatically determinable through role or properties, so assistive technologies can present them without the messages receiving focus.

Level
AA
Since
WCAG 2.1
Principle
Robust
Guideline
4.1 Compatible
Try the live demo All criteria Checklist

Live demo

Search, then add a lamp to the basket

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Press Search and Add to basket in each version. The log shows what a screen reader would announce.

Live example

Passes

Desk lamps

12 lamps

Brass desk lamp

₹2,400

What happened

    Why it passes

    Both messages sit in role="status" regions that are in the page from the start. A screen reader reads them out while focus stays on the button you pressed.

    Why it fails

    The result count and the basket message change on screen, but nothing tells assistive technology about them. A screen reader user hears nothing and may press Add to basket again.

    Examples

    Code that fails, and the fix

    Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    01What changes 7 lines

    Fails

    Basket message with no live region

    Live preview

    HTML
    <button type="button" id="add">Add to basket</button><p id="basket-message"></p><script>  document.getElementById("add").addEventListener("click", () => {    document.getElementById("basket-message").textContent =      "Added to basket. You have 3 items.";  });</script>

    The message appears on screen, but the paragraph has no status role or live region, so a screen reader says nothing and the user does not know the item was added.

    Passes

    Basket message in a status region

    Live preview

    HTML
    <button type="button" id="add">Add to basket</button><p id="basket-message" role="status"></p>

    role="status" is a polite live region, so when script puts text into it the text is announced without moving focus (ARIA22). The empty region is in the page from the start.

    02

    Fails

    Live region created together with its text

    Live preview

    JavaScript
    const region = document.createElement("div");region.setAttribute("aria-live", "polite");region.textContent = "4 results found.";document.getElementById("results").before(region);

    The region and its message arrive at the same moment, so some screen readers never announce it. A live region must exist before its text changes.

    Passes

    Result count updated in an existing region

    Live preview

    JavaScript
    // In the page from the start: <p id="result-count" role="status">12 lamps</p>function showCount(count) {  document.getElementById("result-count").textContent =    count + " results found.";}

    The status region is already in the page, so each new count is announced while focus stays in the search box or on the filter.

    Why it matters

    Who it helps

    Screen reader users may not notice text that appears silently elsewhere on the page, such as a search result count, an added-to-cart notice, or an error alert. Announcing it without moving focus keeps them informed and in place.

    W3C: Understanding 4.1.3

    • Level AA

      Level AA is the level most laws and policies require.

    • In WCAG versions

      Added in WCAG 2.1 in June 2018, and kept in 2.2.

      No WCAG 1.0 checkpoint maps to it.

    • Where it is required

      Required where the law names WCAG 2.1 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Australia and New Zealand.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Trigger actions that show a message without moving focus, such as searching, filtering, adding to a cart, saving, or submitting a form with errors.
    2. Listen with a screen reader and confirm each message is announced without focus moving to it.
    3. Inspect each message container and confirm it uses a suitable role or property, such as status, alert, log, or aria-live, before the text is added.

    Common failures

    Where it breaks

    • An added-to-cart confirmation appears visually but is not in a live region, so screen readers say nothing.
    • A search results count updates silently after filtering, with no status role or live region.
    • A live region is added to the page at the same moment as its message, so some screen readers never announce it.

    On the Accessibility Checklist

    Related