JavaScript Element ariaNotify() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word ARIANOTIFY

Definition

The Element.ariaNotify() method queues a string of text to be announced by a screen reader (MDN). Unlike ARIA live regions, you can announce at any time — not only after a DOM change.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.ariaNotify. Start with this line.

JavaScript
el.ariaNotify(text) / el.ariaNotify(text, options)
CallWhat it does
el.ariaNotify(text) / el.ariaNotify(text, options)Primary signature.
el.ariaNotify(...)Call with the arguments your case needs.

Built into the browser. Call ariaNotify(...) on an Element — no import required.

Library declarations
JavaScript
el.ariaNotify(text) / el.ariaNotify(text, options)

Parameters

ParameterDescription
announcementRequired. Text the screen reader should speak
options.priorityOptional. "normal" (default) or "high"

Return Value

Return ValueDescription
*Always undefined

JavaScript Examples

Example 1 — Basic Announce

Queue a normal-priority announcement on a button click.

JavaScript
const btn = document.getElementById("btn");
const out = document.getElementById("out");

btn.addEventListener("click", () => {
  if (typeof btn.ariaNotify === "function") {
    btn.ariaNotify("Item saved");
  }
  out.textContent = 'announced: "Item saved"';
});
Try It Yourself

How It Works

  1. Listen for the action. Announce after something useful happened.
  2. Feature-detect. Call only when ariaNotify exists.
  3. Pass clear text. Short, specific messages work best.
  4. Log for sighted testing. The lab shows what was queued.

Example 2 — High Priority

Interrupt with priority: "high" for urgent errors (like assertive live regions).

JavaScript
const btn = document.getElementById("btn");
const out = document.getElementById("out");

btn.addEventListener("click", () => {
  if (typeof btn.ariaNotify === "function") {
    btn.ariaNotify("Error: form incomplete", { priority: "high" });
  }
  out.textContent = 'high: "Error: form incomplete"';
});
Try It Yourself

How It Works

  1. Pass options. Second argument sets announcement priority.
  2. Use high sparingly. It may interrupt ongoing speech (MDN).
  3. Prefer normal. Most status updates should wait politely.
  4. Still feature-detect. Missing API → no-op unless you add a fallback.

Example 3 — Feature Detect + Fallback

Use ariaNotify when available; otherwise update an aria-live region.

JavaScript
const btn = document.getElementById("btn");
const live = document.getElementById("live");
const out = document.getElementById("out");

function announce(msg) {
  if (typeof btn.ariaNotify === "function") {
    btn.ariaNotify(msg);
    out.textContent = "ariaNotify: " + msg;
  } else {
    live.textContent = msg;
    out.textContent = "live region: " + msg;
  }
}

btn.addEventListener("click", () => announce("Cart updated"));
Try It Yourself

How It Works

  1. Detect first. Branch on whether the method exists.
  2. Prefer the new API. No hidden live-node dance when supported.
  3. Fall back to live regions. Update textContent on an aria-live element.
  4. Keep one path for users. Same message string in both branches.
Compatibility

Browser Support

Element.ariaNotify() is Baseline 2026 Newly available on MDN (across latest browsers since September 2026). It is not Deprecated, Experimental, or Non-standard. Feature-detect and keep an aria-live fallback for older browsers and blocked Permissions Policy cases.

✓ Baseline Newly available

Element.ariaNotify()

Programmatic screen reader announcements without a DOM mutation. Newly Baseline — still pair with live-region fallbacks.

2026 Newly available
Google Chrome Latest (Baseline 2026)
Supported
Mozilla Firefox Latest (Baseline 2026)
Supported
Apple Safari Latest (Baseline 2026)
Supported
Microsoft Edge Latest (Baseline 2026)
Supported
Opera Chromium latest
Supported
Internet Explorer Not supported — use aria-live
Unavailable
ariaNotify() Newly Baseline

Bottom line: Use when available; always ship an aria-live fallback for older clients.

Frequently Asked Questions

It queues a string of text for a screen reader to announce (MDN). You can call it at any time — announcements do not require a DOM content change like classic ARIA live regions.
No. MDN marks Element.ariaNotify() as Baseline 2026 Newly available (since September 2026). It is not Deprecated, Experimental, or Non-standard. Older browsers still need a live-region fallback.
undefined. There is no promise or status object. Feature-detect the method, then call it; blocked Permissions Policy usage fails silently.
For urgent interruptions, similar to aria-live="assertive". Prefer priority: normal (default, like polite) for most status updates so you do not interrupt the user constantly.
MDN notes that some screen readers may only speak the most recent ariaNotify() call. Combining messages into one string is more reliable than firing several calls in a row.
Fall back to an ARIA live region (update textContent on an aria-live element) or another accessible pattern. Always feature-detect typeof el.ariaNotify === "function".

Next: attachShadow()

Attach a shadow DOM root to an element for encapsulation.

attachShadow() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

12 people found this page helpful

JavaScript Element append() Method JavaScript Element attachShadow() Method