JavaScript Element ariaBusy Property

What You’ll Learn

Element.ariaBusy is an instance property that reflects the aria-busy attribute. Learn the "true" / "false" strings, how busy signals an in-progress update for assistive technologies, and how to get or set the property from JavaScript—with five examples and try-it labs.

Introduction

When a live region is mid-update—loading data, rewriting several nodes, refreshing a clock—you may not want assistive technologies to announce every half-finished change.

aria-busy marks that an element is being modified. The DOM property ariaBusy lets you read and update that flag from JavaScript.

const el = document.getElementById("clock");
console.log(el.ariaBusy); // "false"
el.ariaBusy = "true";

Understanding the Property

MDN: the ariaBusy property of the Element interface reflects the value of the aria-busy attribute, which indicates whether an element is being modified, as assistive technologies may want to wait until the modifications are complete before exposing them to the user.

• Reflected attribute — mirrors aria-busy.
• Get / set — readable and writable string.
• Two tokens — "true" or "false".
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaBusy

Value

A string with one of the following values:

📢 Pairing with Live Region Attributes

MDN’s example uses a timer live region. Busy marks that an update is in progress; live / atomic control how announcements work when changes are exposed.

<div
  id="clock"
  role="timer"
  aria-live="polite"
  aria-atomic="true"
  aria-busy="false"></div>

See also ariaAtomic for the atomic half of this pattern.

Examples Gallery

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

const el = document.getElementById("clock");
console.log(el.ariaBusy);

// HTML includes: aria-busy="false"

false

let el = document.getElementById("clock");
console.log(el.ariaBusy); // false
el.ariaBusy = "true";
console.log(el.ariaBusy); // true

false
true

const clock = document.getElementById("clock");
const steps = [];

clock.ariaBusy = "true";
steps.push("busy: " + clock.ariaBusy);
clock.textContent = "12:00";
steps.push("content: " + clock.textContent);
clock.ariaBusy = "false";
steps.push("busy: " + clock.ariaBusy);

console.log(steps.join("\n"));

busy: true
content: 12:00
busy: false

const el = document.createElement("div");
el.setAttribute("aria-busy", "false");
document.body.appendChild(el);

el.ariaBusy = "true";
console.log({
  fromProperty: el.ariaBusy,
  fromAttribute: el.getAttribute("aria-busy"),
  same: el.ariaBusy === el.getAttribute("aria-busy")
});

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

console.log({
  supported: "ariaBusy" in Element.prototype,
  allowed: ["true", "false"],
  tip: "Set true while updating, false when finished",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "allowed": ["true", "false"],
  "tip": "Set true while updating, false when finished",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Live clocks / timers that rewrite content in steps.
• Status panels loading remote data into a live region.
• Batch DOM updates where intermediate states should not be announced.
• Keeping script and markup aligned without manual setAttribute.
• Pairing with aria-live and ariaAtomic.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Values are strings: "true" and "false".
• Always clear busy when the update finishes.
• Related: ariaChecked, ariaAtomic, EventTarget, JavaScript hub.

💡 Best Practices