JavaScript Element ariaLive Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ARIALIVE

Definition

In JavaScript, ariaLive reflects the aria-live attribute: it marks a live region and tells assistive technology how urgently to announce updates (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.ariaLive. Start with this line.

JavaScript
element.ariaLive
CallWhat it does
element.ariaLivePrimary signature.

Built into the browser. Read or assign el.ariaLive — no import required.

Library declarations
JavaScript
element.ariaLive

Parameters

ParameterDescription
ValueRequired. polite / assertive / off
Content changeRequired. Triggers the announcement
Focus moveOptional. Live regions announce without taking focus
Custom elementsOptional. ElementInternals.ariaLive

Return Value

Return ValueDescription
*The current value of el.ariaLive.

JavaScript Examples

Example 1 — Get and Set (MDN)

Read the current live setting, then raise urgency to "assertive".

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

How It Works

  1. Select the region. It already has aria-live="polite".
  2. Read ariaLive. Returns the string "polite".
  3. Assign "assertive". Updates the reflected attribute.
  4. Read again. Confirms the higher priority setting.

Example 2 — Polite Status Announce

Set a live region, then change its text so AT can announce the update.

JavaScript
const status = document.getElementById("status");
status.ariaLive = "polite";
status.textContent = "Profile saved.";
console.log(status.ariaLive, status.textContent);
Try It Yourself

How It Works

  1. Mark the container. ariaLive = "polite" creates a live region.
  2. Write a short message. Content changes are what AT announces.
  3. Keep it brief. Long paragraphs are hard to listen to.
  4. Do not steal focus. Live regions announce without moving the caret.

Example 3 — Property Reflects the Attribute

Show that ariaLive and aria-live stay in sync.

JavaScript
const el = document.getElementById("planetInfo");
el.ariaLive = "off";
console.log(el.getAttribute("aria-live")); // "off"
el.setAttribute("aria-live", "polite");
console.log(el.ariaLive); // "polite"
Try It Yourself

How It Works

  1. Write via the property. Attribute updates immediately.
  2. Read via getAttribute. Same value as ariaLive.
  3. Write via the attribute. Property reflects the change.
  4. Use exact tokens. polite, assertive, or off.
Compatibility

Browser Support

Element.ariaLive is marked Baseline Widely available on MDN (since October 2023). Logos use the shared browser-image-sprite.png sprite from this project.

✓ Baseline · Widely available

Element ariaLive

Reflects aria-live — live region urgency for assistive technology.

Widely Available
Google Chrome Full support · Desktop & Mobile
Full support
Mozilla Firefox Full support · Desktop & Mobile
Full support
Apple Safari Full support · macOS & iOS
Full support
Microsoft Edge Full support · Chromium
Full support
Opera Full support · Modern versions
Full support
Internet Explorer No Element.ariaLive
Not supported
ariaLive Baseline support

Bottom line: Safe in modern browsers. Prefer polite for status updates; reserve assertive for urgent messages. See the MDN Element.ariaLive reference.

Frequently Asked Questions

It reflects the aria-live attribute as a string, indicating that an element will be updated and describing how assistive technologies should present those updates (assertive, polite, or off).
No. MDN marks Element.ariaLive as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
The strings "assertive", "off", or "polite". Prefer polite for most status updates; reserve assertive for urgent messages.
polite waits for a graceful moment (end of a sentence or typing pause). assertive interrupts and presents updates immediately with highest priority.
Updates to the region should not be presented unless the user is currently focused on that region (MDN).
Yes. Reading and writing ariaLive updates the reflected aria-live attribute. Changing text inside the live region is what triggers announcements.

Next: Element ariaModal

Learn how modal dialogs expose aria-modal to assistive technology.

ariaModal tutorial →

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)

11 people found this page helpful

JavaScript Element ariaLevel Property JavaScript Element ariaModal Property