JavaScript Element ariaReadOnly Property

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

Definition

Element.ariaReadOnly reflects the aria-readonly attribute: the element is not editable, but is otherwise operable (MDN). Read or write a "true" / "false" string from JavaScript.

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

Syntax

Use el.ariaReadOnly. Start with this line.

JavaScript
el.ariaReadOnly / el.ariaReadOnly = value
CallWhat it does
el.ariaReadOnly / el.ariaReadOnly = valuePrimary signature.

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

Library declarations
JavaScript
el.ariaReadOnly / el.ariaReadOnly = value

Parameters

ParameterDescription
Editable widgetRequired. textbox, combobox, gridcell, slider, ...
Token stringRequired. "true" or "false"
Behavior syncRequired. Stop edits when read-only; keep focus

Return Value

Return ValueDescription
*The current value of el.ariaReadOnly.

JavaScript Examples

Example 1 — Read ariaReadOnly

Log the current read-only token from a custom textbox.

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

// HTML: role="textbox" aria-readonly="true" …
Try It Yourself

How It Works

  1. Find the widget. getElementById returns the custom textbox node.
  2. Read the reflection. ariaReadOnly returns the aria-readonly string.
  3. Interpret "true". The user can focus/copy, but cannot change the value.
  4. Missing attribute. If there is no aria-readonly, many browsers return null.

Example 2 — Unlock Editing (MDN Pattern)

MDN: change from read-only to editable with the property.

JavaScript
const el = document.getElementById("txtBoxInput");

console.log(el.ariaReadOnly); // "true"
el.ariaReadOnly = "false";
console.log(el.ariaReadOnly); // "false"
console.log(el.getAttribute("aria-readonly")); // "false"
Try It Yourself

How It Works

  1. Start locked. The first log shows "true".
  2. Assign the property. el.ariaReadOnly = "false" updates the reflected attribute.
  3. Confirm both sides. Property and getAttribute both report "false".
  4. In a real UI. Also allow typing again so behavior matches the token.

Example 3 — Property vs Attribute Sync

Confirm the attribute updates when you write ariaReadOnly.

JavaScript
const el = document.createElement("div");
el.setAttribute("role", "textbox");
el.setAttribute("aria-readonly", "true");
el.tabIndex = 0;

el.ariaReadOnly = "false";
console.log(el.ariaReadOnly);                  // "false"
console.log(el.getAttribute("aria-readonly")); // "false"
console.log(el.ariaReadOnly === el.getAttribute("aria-readonly")); // true
Try It Yourself

How It Works

  1. Build a custom textbox. Role + aria-readonly mark a read-only widget.
  2. Write via JS. Setting ariaReadOnly updates the HTML attribute.
  3. Compare. Property and attribute hold the same string after the write.
  4. Prefer the property in script; keep the attribute for markup and CSS selectors if needed.
Compatibility

Browser Support

Element.ariaReadOnly is Baseline Widely available (MDN: across browsers since October 2023).

✓ Baseline · Widely available

Element.ariaReadOnly

Supported in modern Chromium, Firefox, Safari, and Edge. Internet Explorer has no ariaReadOnly IDL — use getAttribute / setAttribute there.

95% Modern browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
Element.ariaReadOnly Excellent

Bottom line: Safe for modern web apps. Prefer the property in new code; fall back to aria-readonly attributes on very old engines.

Frequently Asked Questions

It reflects the aria-readonly attribute as a string that tells assistive technologies the element is not editable, but is otherwise operable (focusable, copyable, and still relevant).
No. MDN marks Element.ariaReadOnly as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
The strings "true" (user cannot change the value) or "false" (user can set the value). If the attribute is missing, reading the property often returns null.
Yes when possible. MDN recommends an HTML input type="text" or a textarea with the readonly attribute, because they have built-in semantics and do not need ARIA.
Read-only means the value cannot be edited, but the control can still be focused and used (for example copied). Disabled means the control is not operable — use ariaDisabled for that.
No. When you use semantic HTML form controls with the readonly attribute, you do not need aria-readonly="true" as well (MDN).

Next: ariaRelevant

Learn the reflected aria-relevant property for live-region change announcements.

ariaRelevant 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 ariaPressed Property JavaScript Element ariaRelevant Property