demo · v141

Notification Timing Lab

Compare ariaNotify() head-to-head with the classic aria-live pattern. Type a message, pick priority, and see how each method handles single announcements — then run a rapid-fire burst of five to watch the fundamental difference: live regions collapse to the last message, ariaNotify queues every one.

Screen reader required to hear output Both API calls fire regardless of browser support detection. To hear them spoken, enable a screen reader (VoiceOver on macOS/iOS, NVDA/JAWS on Windows, TalkBack on Android). The visual log below shows every call that was issued.
probing ariaNotify support…

ariaNotify Chrome 141

(log empty)

Calls el.ariaNotify(msg, { priority }) — each call joins the platform queue independently.

aria-live region classic

(log empty)

Sets liveRegion.textContent = msg — the AT speaks whatever is in the region when it next polls.

Burst simulator — 5 rapid announcements

Fires five numbered messages with a 120ms gap. The live region typically only reads the last one (overwrites the DOM before the AT polls). ariaNotify queues all five independently.

(announcement log empty)

ariaNotify pattern

// The element whose accessibility queue receives the message
const host = document.getElementById("announcer");

// Single announcement
host.ariaNotify("File saved", { priority: "auto" });

// Priority: "none" | "auto" | "important"
// "important" may interrupt or pre-empt lower-priority queued messages

aria-live pattern (classic)

// Classic approach: a visually-hidden region watched by the AT
const region = document.getElementById("liveRegion");
// aria-live="polite" | "assertive"
// aria-atomic="true"

// Announce by mutating the DOM
region.textContent = "File saved";

// Problem with rapid updates: setting textContent twice in quick
// succession means the AT only sees the *final* DOM state.
// ariaNotify queues each call as a discrete entry.

why the difference matters

A live region is a DOM observation: the browser watches for mutations and forwards the current text to the AT. If you update it five times before the AT polls, only the last value is ever spoken. ariaNotify sends a discrete message directly to the platform accessibility queue — each call is a separate entry, not a DOM state. This makes it reliable for progress updates, toasts, and multi-step confirmations where every message counts.

see also