JavaScript Element ariaReadOnly Property

What You’ll Learn

Element.ariaReadOnly is an instance property that reflects the aria-readonly attribute. Learn the true and false tokens, how read-only differs from disabled, and how to get or set the property from JavaScript—with five examples and try-it labs.

Introduction

Sometimes a field should be visible and focusable, but users must not change its value—a locked form preview, a calculated total, or a confirmed address. That is read-only, not disabled.

aria-readonly carries that signal. ariaReadOnly is the JavaScript reflection of that attribute.

const el = document.getElementById("txtBoxInput");
console.log(el.ariaReadOnly); // "true"
el.ariaReadOnly = "false";

Understanding the Property

MDN: the ariaReadOnly property of the Element interface reflects the value of the aria-readonly attribute, which indicates that the element is not editable, but is otherwise operable.

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

📝 Syntax

ariaReadOnly

Value

A string with one of the following values:

📋 MDN Example Shape

MDN starts with a contenteditable textbox marked aria-readonly="true", then unlocks it to "false":

<div id="txtboxMultilineLabel">Enter the tags for the article</div>
<div
  role="textbox"
  id="txtBoxInput"
  contenteditable="true"
  aria-multiline="true"
  aria-labelledby="txtboxMultilineLabel"
  aria-readonly="true"
></div>

let el = document.getElementById("txtBoxInput");
console.log(el.ariaReadOnly); // "true"
el.ariaReadOnly = "false";
console.log(el.ariaReadOnly); // "false"

When ariaReadOnly is "true", also block edits in script (or turn off contenteditable) so the real behavior matches what assistive technologies announce.

Examples Gallery

Examples follow MDN Element: ariaReadOnly. Labs use a custom textbox so you can safely read and write the property.

const el = document.getElementById("txtBoxInput");
console.log(el.ariaReadOnly);

// HTML includes: role="textbox" aria-readonly="true"

true

let el = document.getElementById("txtBoxInput");
console.log(el.ariaReadOnly); // "true"
el.ariaReadOnly = "false";
console.log(el.ariaReadOnly); // "false"

true
false

const box = document.createElement("div");
box.setAttribute("role", "textbox");
box.setAttribute("contenteditable", "true");
box.setAttribute("aria-label", "Confirmed address");
document.body.appendChild(box);

box.ariaReadOnly = "true";
console.log({
  ariaReadOnly: box.ariaReadOnly,
  attr: box.getAttribute("aria-readonly")
});

{
  "ariaReadOnly": "true",
  "attr": "true"
}

const el = document.createElement("div");
el.setAttribute("role", "textbox");
el.setAttribute("contenteditable", "true");
el.setAttribute("aria-readonly", "true");
el.setAttribute("aria-label", "Tags");
document.body.appendChild(el);

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

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

console.log({
  supported: "ariaReadOnly" in Element.prototype,
  allowed: ["true", "false"],
  tip: "Prefer input/textarea readonly when possible (MDN)",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "allowed": ["true", "false"],
  "tip": "Prefer input/textarea readonly when possible (MDN)",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Custom textboxes that switch between locked preview and edit mode.
• Confirmed values (address, email) that remain focusable for copy.
• Calculated fields that must stay visible but not editable.
• Design-system editors that cannot use native readonly.
• Keeping script and markup aligned without manual setAttribute.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Prefer native readonly on <input> / <textarea> when possible (MDN).
• Keep editing behavior aligned with the true / false value.
• Related: ariaPressed, ariaDisabled, ariaRelevant, JavaScript hub.

💡 Best Practices