ARIA-live: announce dynamic changes

When content changes WITHOUT a page reload

A user submits a form via fetch. The response appears in a <div>. Sighted users see it. Screen-reader users DON'T — the DOM changed silently. To make the change audible, mark the container with aria-live:

<div id="status" aria-live="polite">
  <!-- when JS injects text here, the screen reader announces it -->
</div>

polite vs assertive

• `aria-live="polite"` — announces during a natural pause in screen-reader speech. Use for non-urgent feedback ("Saved.", "5 items found").
• `aria-live="assertive"` — interrupts whatever the screen reader is reading right now. Use ONLY for critical errors ("Session expired.", "Payment failed.").

99% of cases want polite. Reach for assertive when missing the message would harm the user.

Common gotchas

• The aria-live region must be in the DOM BEFORE the content is added. Adding a new <div aria-live="polite">FYI</div> to the DOM doesn't trigger an announcement.
• Don't put two screen-reader status messages in the same region in quick succession — the second can clobber the first.
• Clear the region between announcements (set it to empty, then to the new message). Some screen readers don't re-announce identical text.

Built-in roles that imply aria-live

• role="status" = aria-live="polite"
• role="alert" = aria-live="assertive"
• role="log" = aria-live="polite" + aria-atomic="false"

So <div role="status"> is shorthand for <div aria-live="polite">.