status

When to use

For non-urgent advisory messages: “Saved”, “12 results”, “Item added to cart”, “Connecting…”. role="status" is equivalent to aria-live="polite" plus an implicit aria-atomic="true" — the screen reader waits for the current utterance to finish, then reads the change.

Most form-submission successes, search-results counts, loading completions, and toast notifications belong here. Reserve role="alert" for genuine interruptions.

The native <output> element carries role="status" automatically — useful for calculator-style results paired with <form> inputs. For toast and status notifications outside form context, <div role="status"> is the standard pattern.

Like all live regions, the status element MUST be in the DOM before the message is inserted. Render <div role="status"></div> empty, then update its text content. Adding the element from scratch with content already inside is unreliable.

Live-region trade-offs

• aria-live="off" — no announcement. Default for regular content.
• aria-live="polite" (≡ role="status") — announced at the next pause. Default for status messages.
• aria-live="assertive" (≡ role="alert") — interrupts current speech. Use only for urgent messages.

WCAG 4.1.3 (Status Messages, AA) requires status messages to be exposed via a live region so assistive tech can announce them without forcing a focus change.

Common failures

• Status element created on the fly with text already inside. Many screen readers miss the announcement.
• Updating the status with marked-up content (<span>s and <strong>s). Some screen readers read the markup verbatim; keep status content plain.
• Multiple updates fired rapidly — later messages overwrite earlier ones with no announcement.
• Using role="status" for genuinely urgent errors (use role="alert").
• Visually hidden status with no aria-atomic consideration when its text contains both stable and changing parts. Default aria-atomic="true" on status reads the whole region every time, which can be noisy.

Example

<!-- Render empty at page load -->
<div role="status" id="cartStatus"></div>

<script>
  // When the cart updates:
  document.getElementById('cartStatus').textContent =
    'Added to cart. 3 items, $42.00 total.';
</script>

<!-- Native equivalent -->
<form>
  <label>a <input type="number" id="a"></label>
  <label>b <input type="number" id="b"></label>
  <output for="a b" id="sum">0</output>
</form>