Live region sandbox

One button, one live region, one <output>. Pick a setting, press the button with a screen reader running, and compare what you hear with the table at the bottom.

Run it with NVDA

  1. Start NVDA with Ctrl + Alt + N, then open this page in the browser.
  2. Open NVDA menu → Tools → Speech viewer (Insert + N). It prints every announcement as text, so you can copy exactly what was said.
  3. Choose a setting and apply it. The page reloads with the live region built from scratch.
  4. Tab to Add to cart and press Enter three times.
  5. Quit NVDA with Insert + Q.

Settings

aria-live
role
Overrides aria-live when set.
Announce via
Live markup right now

Test bench

Cart 0 items
aria-live region

Cart status:

Native <output>

Cart status:

What to listen for

After three presses. The highlighted row matches the live setting.

Setting Expected announcement
polite Only the changed span, after NVDA finishes speaking: "3 items, 29.97 kr".
polite + atomic The whole region: "Cart status: 3 items, 29.97 kr".
assertive The same text, but it cuts off whatever NVDA was saying (the button name, for example).
role="status" Like polite + atomic, with no aria-live attribute needed.
role="alert" Like assertive + atomic.
<output> Polite. Only "3 items, 29.97 kr": the region is the output element, and "Cart status:" is outside it.
off Nothing. The cart value still updates on screen.