JavaScript Element ariaLive Property

What You’ll Learn

Element.ariaLive is an instance property that reflects the aria-live attribute. Learn the polite, assertive, and off tokens, how live regions announce dynamic updates, and how to get or set the property from JavaScript—with five examples and try-it labs.

Introduction

Modern pages update without a full reload: status messages, search results, chat lines, validation hints. Sighted users see the change. Assistive technology users need a signal that something in a region changed.

aria-live creates that live region. ariaLive is the JavaScript reflection of that attribute.

const el = document.getElementById("planetInfo");
console.log(el.ariaLive); // "polite"
el.ariaLive = "assertive";

Understanding the Property

MDN: the ariaLive property of the Element interface reflects the value of the aria-live attribute, which indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

• Reflected attribute — mirrors aria-live.
• Get / set — readable and writable string.
• Three tokens — assertive, off, polite.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaLive

Value

A string with one of the following values:

📋 MDN Example Shape

MDN starts with aria-live="polite" on a region, then updates it to "assertive":

<div role="region" id="planetInfo" aria-live="polite">
  <h2 id="planetTitle">No planet selected</h2>
  <p id="planetDescription">Select a planet to view its description</p>
</div>

let el = document.getElementById("planetInfo");
console.log(el.ariaLive); // "polite"
el.ariaLive = "assertive";
console.log(el.ariaLive); // "assertive"

Examples Gallery

Examples follow MDN Element: ariaLive. Labs use a live region so you can safely read and write the property.

const el = document.getElementById("planetInfo");
console.log(el.ariaLive);

// HTML includes: aria-live="polite"

polite

let el = document.getElementById("planetInfo");
console.log(el.ariaLive); // "polite"
el.ariaLive = "assertive";
console.log(el.ariaLive); // "assertive"

polite
assertive

const status = document.createElement("div");
status.setAttribute("role", "status");
status.textContent = "Ready";
document.body.appendChild(status);

status.ariaLive = "polite";
console.log({
  ariaLive: status.ariaLive,
  attr: status.getAttribute("aria-live")
});

{
  "ariaLive": "polite",
  "attr": "polite"
}

const el = document.createElement("div");
el.setAttribute("role", "region");
el.setAttribute("aria-live", "polite");
el.textContent = "Select a planet to view its description";
document.body.appendChild(el);

el.ariaLive = "assertive";
console.log({
  fromProperty: el.ariaLive,
  fromAttribute: el.getAttribute("aria-live"),
  same: el.ariaLive === el.getAttribute("aria-live")
});

{
  "fromProperty": "assertive",
  "fromAttribute": "assertive",
  "same": true
}

console.log({
  supported: "ariaLive" in Element.prototype,
  allowed: ["assertive", "off", "polite"],
  tip: "Prefer polite; use assertive only for urgent updates",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "allowed": ["assertive", "off", "polite"],
  "tip": "Prefer polite; use assertive only for urgent updates",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Form save / validation status messages (polite).
• Urgent error banners that must interrupt (assertive).
• Search result counts or filter summaries that update in place.
• Chat or notification regions with controlled announcement priority.
• Keeping script and markup aligned without manual setAttribute.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Prefer polite for most updates; use assertive sparingly.
• Announcements happen when content inside the live region changes.
• Related: ariaModal, ariaAtomic, EventTarget, JavaScript hub.

💡 Best Practices