How to Announce Dynamic Updates to Screen Readers

Dynamic updates are obvious to sighted users but invisible to screen readers. An aria-live region tells assistive technology to announce changes, and React updates that region through state. This article shows the polite pattern, the two urgency levels, and how to announce the right amount. A live region works only when it is already mounted before the content changes, so it stays on the page while the message updates.

A polite live region

Keep a message in state, then render it inside a live region. The region starts empty so the first update triggers an announcement.

App.jsx

import { useState } from "react";
 
function SaveButton() {
  const [message, setMessage] = useState("");
  function handleSave() {
    setMessage("Saved");
  }

The save handler sets the message, and the live region below reads that message. Because the region is always mounted, a screen reader can watch it for changes and announce the update. The user's focus stays on the button the whole time.

App.jsx

  return (
    <>
      <button onClick={handleSave}>Save</button>
      <div role="status">{message}</div>
    </>
  );
}

role status makes the div a polite live region. After the button is clicked, a screen reader announces Saved. The empty starting value is important, because assistive technology only announces changes, not initial content. If the region begins with text already inside it, the first update can be missed.

polite vs assertive

The setting controls when the announcement happens relative to the user's current task.

Use polite almost everywhere. Assertive interrupts whatever the screen reader is saying, so reserve it for errors that demand immediate action. Announce with assertive only when the user must act right away, like a failed payment.

Announce the whole message with aria-atomic

By default a live region announces only the part of its text that changed. If your message mixes fixed and changing words, add aria-atomic to read it all.

App.jsx

<div role="status" aria-atomic="true">
  Added {itemName} to the cart.
</div>

Without aria-atomic, a screen reader may announce only the item name. With it, the reader speaks the full sentence, which is easier to follow. Reserve aria-atomic for short messages whose fixed words are worth repeating.

What to learn next

Live regions depend on stable element relationships. Continue with React useId explained for the IDs behind these connections, and how to manage focus in modals and route changes for the matching focus behavior.