Accessibility: Live regions

Live regions

Screen readers announce changes inside a live region.

For agentsUpdated 2026-10-20

Screen readers announce changes inside a live region. The region must exist before its content changes, so render the container once and change what is inside it:

src/live.tsxtsx

import { useStore } from "@shadow-js/core";

export function Cart() {
  const [items, setItems] = useStore(0);
  const [message, setMessage] = useStore("");
  const add = (): void => {
    const next = items() + 1;
    setItems(next);
    setMessage(`Added item ${next}.`);
  };
  return (
    <div>
      <button type="button" onClick={add}>
        Add to cart
      </button>
      <p>{items()} in cart</p>
      {/* Always rendered; only its text changes. */}
      <p role="status" aria-live="polite" aria-atomic="true">
        {message()}
      </p>
    </div>
  );
}

role="status" (polite) and role="alert" (assertive) imply a live region. Use alert for errors that need immediate attention and status for everything else. Do not conditionally render the live region itself (<Show when={message()}><p role="status">...): many screen readers miss a region that appears together with its text.