Recipe: aria-live region patterns

Accessible live regions for dynamic content updates without focus disruption.

Polite announcements

Use aria-live="polite" for non-urgent updates. The screen reader finishes its current sentence before speaking.

<div aria-live="polite" aria-atomic="true">
  {statusMessage}
</div>

Assertive alerts

aria-live="assertive" interrupts immediately. Reserve for critical errors or time-sensitive warnings.

<div aria-live="assertive" role="alert">
  <p>Session expired. Please log in again.</p>
</div>

Off-screen live container

Visually hide the region while keeping it in the accessibility tree. Never use display: none.

<div
  aria-live="polite"
  className="sr-only"
  aria-atomic="true"
>
  {liveText}
</div>

Role alertdialog

For modal confirmations, combine role="alertdialog" with aria-live so the message is announced when the dialog opens.

<div role="alertdialog" aria-live="assertive" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Delete account?</h2>
  <p>This action cannot be undone.</p>
</div>

Key takeaways

Always pair aria-live with aria-atomic for full-region reads.
Prefer polite by default; escalate to assertive sparingly.
Never remove the live region from the DOM — update its text content instead.