← Lab

aria-live announcement monitor

What a screen reader “would say”, made visible · zero dependencies

Modern apps announce changes through dynamic regions (aria-live, role="alert", role="status"…), but no developer tool shows you what gets announced, when, and with which politeness. This monitor logs it to an overlay panel: time, assertive/polite, role, element and text.

⬇︎ Drag me to your bookmarks bar— then open it on any page and the monitor will start.(The code is served from this very site; the link is built on load.)

Live demo

Activate the monitor below and fire test announcements. An alert is announced on insertion (assertive); a polite status is announced when its content changes.

Activate monitor hereFire an alertUpdate status (polite)

Typical mistakes this monitor exposes

• Cascading announcements: a single action spawns five announcements (validation + status + focus…). Screen-reader users suffer through all of them.
• Content loaded before the region exists: text is injected and aria-live is set afterwards → it is never announced.
• Assertive by default: using alert for trivia interrupts the current reading.
• Announcing the invisible: changes in hidden containers that should never be announced.

Sister tool from the same lab: contrast checker. For agents and integration: also available as an MCP tool.