JavaScript Element ariaModal Property

What You’ll Learn

Element.ariaModal is an instance property that reflects the aria-modal attribute. Learn the true and false tokens, how modal dialogs signal that outside content is inert, and how to get or set the property from JavaScript—with five examples and try-it labs.

Introduction

A modal dialog asks the user to finish something before returning to the page: confirm a delete, pick an address, complete a form. Sighted users see a backdrop. Assistive technologies need an explicit signal that the dialog is modal.

aria-modal carries that signal. ariaModal is the JavaScript reflection of that attribute.

const el = document.getElementById("address-modal");
console.log(el.ariaModal); // "true"
el.ariaModal = "false";

Understanding the Property

MDN: the ariaModal property of the Element interface reflects the value of the aria-modal attribute, which indicates whether an element is modal when displayed.

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

📝 Syntax

ariaModal

Value

A string with one of the following values:

📋 MDN Example Shape

MDN starts with aria-modal="true" on a dialog, then updates it to "false":

<div
  role="dialog"
  id="address-modal"
  aria-labelledby="dialog1Title"
  aria-describedby="dialog1Desc"
  aria-modal="true"
></div>

let el = document.getElementById("address-modal");
console.log(el.ariaModal); // "true"
el.ariaModal = "false";
console.log(el.ariaModal); // "false"

Related naming APIs for dialogs: ariaLabelledByElements and ariaDescribedByElements.

Examples Gallery

Examples follow MDN Element: ariaModal. Labs use a dialog-style control so you can safely read and write the property.

const el = document.getElementById("address-modal");
console.log(el.ariaModal);

// HTML includes: role="dialog" aria-modal="true"

true

let el = document.getElementById("address-modal");
console.log(el.ariaModal); // "true"
el.ariaModal = "false";
console.log(el.ariaModal); // "false"

true
false

const dialog = document.createElement("div");
dialog.setAttribute("role", "dialog");
dialog.setAttribute("aria-label", "Confirm delete");
dialog.textContent = "Are you sure?";
document.body.appendChild(dialog);

dialog.ariaModal = "true";
console.log({
  ariaModal: dialog.ariaModal,
  attr: dialog.getAttribute("aria-modal")
});

{
  "ariaModal": "true",
  "attr": "true"
}

const el = document.createElement("div");
el.setAttribute("role", "dialog");
el.setAttribute("aria-modal", "true");
el.setAttribute("aria-label", "Address");
document.body.appendChild(el);

el.ariaModal = "false";
console.log({
  fromProperty: el.ariaModal,
  fromAttribute: el.getAttribute("aria-modal"),
  same: el.ariaModal === el.getAttribute("aria-modal")
});

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

console.log({
  supported: "ariaModal" in Element.prototype,
  allowed: ["true", "false"],
  tip: "Use with role=dialog; still manage focus / inert yourself",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "allowed": ["true", "false"],
  "tip": "Use with role=dialog; still manage focus / inert yourself",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Confirm / alert dialogs that block the rest of the page.
• Custom address or settings modals with role="dialog".
• Toggling modality when a panel switches between modal and non-modal modes.
• Replacing background aria-hidden patterns with aria-modal (MDN).
• Keeping script and markup aligned without manual setAttribute.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• On role="dialog", prefers aria-modal over background aria-hidden (MDN).
• Does not by itself trap focus or block pointer events.
• Related: ariaMultiLine, ariaHidden, EventTarget, JavaScript hub.

💡 Best Practices