Page announces dynamic content changes via aria-live regions with appropriate politeness setting

Single-page applications update content dynamically—cart counts change, search results replace prior results, toast notifications appear, status messages resolve—all without a page reload. Screen readers only announce DOM changes inside aria-live regions; DOM changes elsewhere are silent. WCAG 2.2 SC 4.1.3 (Level AA) requires status messages to be programmatically determinable without receiving focus, and SC 1.3.1 (Level A) requires that information conveyed through presentation be available to AT. Section 508 2018 Refresh 502.3.14 requires applications to notify AT of relevant UI events. A cart update, form submission success, or real-time filter that silently changes the DOM shuts screen reader users out of the live application state.

Wrap every dynamic status message in an aria-live region. For non-urgent updates (cart count, filter results), use aria-live="polite". For urgent alerts (errors, session warnings), use aria-live="assertive":

// In a shared Announcer component — mount once at root
const [politeMessage, setPoliteMessage] = useState('');

export function useAnnounce() {
  return (msg: string) => {
    setPoliteMessage(''); // Clear first to re-trigger announcement
    requestAnimationFrame(() => setPoliteMessage(msg));
  };
}

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

In your cart or filter component:

const announce = useAnnounce();

const addToCart = (item: Item) => {
  addItem(item);
  announce(`${item.name} added to cart. ${cartCount + 1} items total.`);
};

Avoid aria-live="assertive" for routine updates—it interrupts whatever the screen reader is currently reading.