Live region

A live region is part of the DOM that, when its content changes, gets announced to screen-reader users automatically — without moving focus, without requiring the user to navigate to it, and without forcing them to refresh.

Live regions are the mechanism behind every “Toast: Item added to cart” notification, every form-validation “Error: Email is required” message, every search-results-count update that a screen-reader user actually hears.

The basic attribute

The simplest live region is a div with aria-live="polite":

<div aria-live="polite" id="status">
  <!-- content here will be announced when it changes -->
</div>

When JavaScript inserts text into #status, the screen reader announces the new text at the next natural pause — without interrupting whatever the user is currently reading.

Polite vs assertive

aria-live has two operational values:

• polite — wait until the user is idle, then announce. Use for most notifications: confirmations, search counts, status messages.
• assertive — interrupt the user’s current reading and announce immediately. Use only for genuinely urgent messages: critical errors, session expiration warnings, time-sensitive alerts.

Heavy assertive use is the single most common live-region failure. Every minor toast firing assertive turns the screen reader into a constant interrupter, training the user to disable the live region entirely.

ARIA-derived alternatives

Several ARIA roles imply aria-live automatically:

• role="alert" → behaves like aria-live="assertive".
• role="status" → behaves like aria-live="polite".
• role="log" → polite, with the conceptual hint of an append-only log (chat history, console output).
• role="timer" → polite, for countdown timers.

Picking a role is often clearer than picking an aria-live value directly — it documents the purpose of the region.

What goes wrong in practice

• Live region added at the same time as the content. ARIA only announces changes to live regions that already existed in the DOM. Inserting <div aria-live="polite">Loaded</div> as a single block doesn’t announce — the region and the content arrived together. Fix: keep the empty live region in the DOM from page load, populate it later.
• Too-rapid updates. Inserting text into a live region multiple times per second flushes the previous announcement before it finishes. The user hears fragments. Throttle or debounce updates.
• Modal-managed announcements that should use focus instead. If the user’s intentional action triggered the message, moving focus to the message (or a related control) is often better than relying on a live-region announcement. Live regions are for passive notifications.
• Decorative noise in the live region. A live region that contains loading spinners, icons, and timestamps in addition to the message causes the screen reader to read all of it on every update. Keep the region’s content to just the message.