In JavaScript, ariaModal reflects the aria-modal attribute: a string ("true" / "false") that tells assistive technology whether a dialog is modal when displayed (MDN).
Read the notes below before you get or set this property. Prefer feature detection when support is limited.
Use el.ariaModal. Start with this line.
element.ariaModal| Call | What it does |
|---|---|
element.ariaModal | Primary signature. |
Built into the browser. Read or assign el.ariaModal — no import required.
element.ariaModal| Parameter | Description |
|---|---|
| Value | Optional. "true" or "false" |
| Focus management | Required. Trap inside; restore on close |
| Custom elements | Optional. ElementInternals.ariaModal |
| Return Value | Description |
|---|---|
| * | The current value of el.ariaModal. |
Read the current modality, then set it to "false".
let el = document.getElementById("address-modal");
console.log(el.ariaModal); // "true"
el.ariaModal = "false";
console.log(el.ariaModal); // "false"aria-modal="true".ariaModal. Returns the string "true"."false". Updates the reflected attribute.role="dialog" + ModalDeclare a dialog and mark it modal for assistive technology.
const box = document.getElementById("confirm");
box.setAttribute("role", "dialog");
box.ariaModal = "true";
box.setAttribute("aria-labelledby", "confirm-title");
console.log(box.role, box.ariaModal);dialog identifies the container.ariaModal. Tells AT outside content is inert while open.aria-labelledby (or similar) for an accessible name.Show that ariaModal and aria-modal stay in sync.
const el = document.getElementById("address-modal");
el.ariaModal = "false";
console.log(el.getAttribute("aria-modal")); // "false"
el.setAttribute("aria-modal", "true");
console.log(el.ariaModal); // "true"getAttribute. Same value as ariaModal."true" and "false" (not booleans alone as the attribute form).Element.ariaModal is marked Baseline Widely available on MDN (since October 2023). Logos use the shared browser-image-sprite.png sprite from this project.
Reflects aria-modal — whether a dialog is modal when displayed.
Bottom line: Safe in modern browsers. Pair with focus management (or native dialog showModal). See the MDN Element.ariaModal reference.
Learn how textboxes expose multi-line semantics to assistive technology.
11 people found this page helpful