Skip to main content
PUBLIC.INTERNET
⚡ Acces Instantane🔒 Confidentialite d'Abord🆓 Toujours Gratuit📱 Fonctionne Partout

ARIA Live Region Tester

Live regions are how a web app tells a screen reader that something changed without moving focus, the "Message sent," "3 results found," or "Connection lost" you never see but blind users rely on. They are also famously fiddly: the region has to exist in the DOM before you put text in it, and the difference between polite and assertive decides whether an announcement waits its turn or barges in. This tester lets you set that up with no code. Pick a Live region type (role="status", role="alert", role="log", or a raw aria-live value), toggle aria-atomic, type a message, and press Announce. The page holds a real live region, so if you have VoiceOver, NVDA, or JAWS running it will actually speak. Alongside it, a log explains what a screen reader does with each message: a polite update queues after the current speech, an assertive one interrupts. The Markup panel gives you the exact element and the JavaScript to update it.

Markup

If you have a screen reader running (VoiceOver, NVDA, JAWS), pressing Announce will speak the message, because this is a real live region in the page.
Live region (in the DOM now)
What a screen reader would do
    How to Test a Live Region
    1. Choose the region type - Pick role status, alert, log, or a raw aria-live value from Live region type; the markup updates to match.
    2. Decide on atomic - Toggle aria-atomic to announce the whole region or just the part that changed.
    3. Write a message - Type what should be announced in Message to announce.
    4. Announce and observe - Press Announce to update the real live region and add an entry to the log explaining polite versus assertive behavior; turn on a screen reader to hear it.
    5. Copy the markup - Click Copy to grab the region element and the update snippet for your app.
    Why This Tool?
     Live regions are documented everywhere and demonstrated almost nowhere you can poke at. The existing helpers are browser DevTools panels, a government bookmarklet that scans a page you already built, and framework libraries, none of which let you sit down, try role="alert" versus aria-live="polite", and feel the difference. Because this region is live in the page, it doubles as a quick sanity check: turn on your screen reader, hit Announce, and confirm your understanding before you wire it into a real app. 
     The mistake that sends people searching "live region not announcing" is creating the element and filling it in the same breath. Screen readers only announce changes to a region that was already present and being watched, so injecting <div aria-live="polite">Saved</div> all at once usually says nothing. The fix is to render the empty region up front and update only its text later, which is exactly what the copied markup and snippet do. A practical rule: use polite (or role="status") for almost everything and reserve assertive (or role="alert") for genuinely urgent, time-critical messages, since interrupting a user is jarring.