# ARIA Live Regions: Announce Status Messages

Source: https://allyway.ai/glossary/aria-live

An ARIA live region is a part of the page marked with aria-live or a live role such as status or alert. When its content changes, screen readers announce the new text without the user having to move focus to it.

ARIA live regions are areas of a page that tell assistive technology: "announce changes here". When a shop adds an item to the cart, a search returns results or a form shows an error next to a field, sighted visitors notice it at a glance. A [screen reader](https://allyway.ai/glossary/screen-reader) user only hears about it if the message sits in a live region – otherwise the update happens in silence.

## What it means

[WCAG 4.1.3 Status Messages](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) (Level AA, [WCAG 2.2](https://allyway.ai/regulations/wcag-2-2)) requires that status messages can be programmatically determined through role or properties, so assistive technology can present them without the message receiving focus. W3C defines a status message as a change in content that is not a change of context and that reports the result of an action, a waiting state, the progress of a process or the existence of errors.

Typical status messages from the W3C examples: "5 results returned" after a search, an updated cart count, an "Invalid entry" note near a field, a busy indicator and a confirmation after a form was sent.

The [ARIA](https://allyway.ai/glossary/aria) specification offers several ways to mark them:

| Markup | Announcement | Use it for |
|---|---|---|
| `role="status"` | Polite – waits until the screen reader is idle | Results, confirmations, cart counts (W3C technique ARIA22) |
| `role="alert"` | Assertive – interrupts | Errors and warnings that need attention now (ARIA19) |
| `role="log"` | Polite, new entries added in order | Chat messages, activity feeds (ARIA23) |
| `aria-live="polite"` / `"assertive"` | As above, on any container | Custom widgets without a fitting role |

> **Note:** > **Not everything is a status message**
> Messages in a dialog that takes focus, a new page, or a menu that opens are out of scope for 4.1.3. Expanding and collapsing widgets are covered by 4.1.2 Name, Role, Value instead – see [accessible name](https://allyway.ai/glossary/accessible-name).

W3C also lists a failure: using `role="alert"` or `aria-live="assertive"` on content that is neither important nor time-sensitive. Constant interruptions make a page tiring to use.

## Examples

```html title="Example"
<!-- Good: the region exists from the start, text is added later -->
<p role="status" id="cart-status"></p>
<script>
  document.getElementById('cart-status').textContent = '3 items in your cart';
</script>

<!-- Good: an error that needs attention -->
<p role="alert">Payment failed. Please check your card number.</p>

<!-- Bad: visual-only update, never announced -->
<span class="badge">3</span>
```

**Do:** Do

Put the live region into the page when it loads and change only its text. Keep messages short ("Saved"), use `role="status"` for most updates and keep `role="alert"` for real errors. Give icon-only counters a text the screen reader can say.

**Don't:** Don't

Insert the whole live region together with its message – many screen readers miss it. Don't mark large areas such as a full product list as live, don't use assertive for routine updates, and don't rely on a color change or a badge alone.

## How to check ARIA live regions



## Questions

Q: What is the difference between aria-live polite and assertive?
A: Polite waits until the screen reader has finished what it is saying, then reads the update. Assertive interrupts immediately. Use polite for almost everything and assertive only for urgent errors or warnings.

Q: Is role="status" the same as aria-live="polite"?
A: Almost. role="status" gives the region an implicit aria-live value of polite and an aria-atomic value of true, so the whole message is read. It also tells assistive technology that the content is advisory status information.

Q: Why does my screen reader not announce the live region?
A: Most often the region was added to the page together with its text. Browsers only report changes to regions that already exist. Add an empty container on page load and fill it later. Hidden containers with display: none are not announced either.

Q: Do form error messages need a live region?
A: Errors shown without moving focus are status messages under WCAG 4.1.3, so they need role="alert" or a live region. If you move focus to an error summary instead, the focus change already makes the screen reader read it. Link each message to its field as well, as described for [form labels](https://allyway.ai/glossary/form-labels).