JavaScript Element ariaDisabled Property

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

Definition

Element.ariaDisabled reflects the aria-disabled attribute: the element is perceivable but disabled — not editable or otherwise operable (MDN).

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

Syntax

Use el.ariaDisabled. Start with this line.

JavaScript
el.ariaDisabled;
CallWhat it does
el.ariaDisabled;Primary signature.

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

Library declarations
JavaScript
el.ariaDisabled;

Parameters

ParameterDescription
PropertyRequired. el.ariaDisabled
ValuesRequired. "true" / "false" strings

Return Value

Return ValueDescription
*The current value of el.ariaDisabled.

JavaScript Examples

Example 1 — Get and Set ariaDisabled (MDN)

Read the string, then enable the custom control.

JavaScript
const el = document.getElementById("saveChanges");
console.log(el.ariaDisabled); // "true"
el.ariaDisabled = "false";
console.log(el.ariaDisabled); // "false"
Try It Yourself

How It Works

  1. Select the custom control. MDN uses a role="button" element.
  2. Read ariaDisabled. Starts as the string "true".
  3. Assign "false". Reflects back to aria-disabled.
  4. Use strings only. Do not assign boolean true/false.

Example 2 — Guard Activation When Disabled

ARIA marks the state; your handler must ignore the action.

JavaScript
const save = document.getElementById("saveChanges");
const out = document.getElementById("out");

function activate() {
  if (save.ariaDisabled === "true") {
    out.textContent = "Ignored — control is disabled";
    return;
  }
  out.textContent = "Saved!";
}

save.addEventListener("click", activate);
save.addEventListener("keydown", (event) => {
  if (event.key === "Enter" || event.key === " ") {
    event.preventDefault();
    activate();
  }
});
Try It Yourself

How It Works

  1. Listen for click and keyboard. Custom buttons need both.
  2. Check ariaDisabled === "true". Bail out if disabled.
  3. Run the action only when enabled. Semantics alone do not block events (MDN).
  4. Keep the control discoverable if you intentionally leave it focusable.

Example 3 — Prefer Native disabled

MDN: use a real button when you can — no ARIA required.

JavaScript
const save = document.querySelector("button");
const out = document.getElementById("out");

save.addEventListener("click", () => {
  out.textContent = "Saved!";
});

// disable with the HTML boolean attribute / property
save.disabled = true;
out.textContent = "Native disabled = " + save.disabled;
Try It Yourself

How It Works

  1. Use <button type="button">. Built-in role and keyboard behavior.
  2. Set disabled = true. Browser blocks activation and form use.
  3. Skip aria-disabled for that control — native wins (MDN).
  4. Reach for ariaDisabled mainly on custom widgets without a disabled attribute.
Compatibility

Browser Support

Element.ariaDisabled is Baseline Widely available (MDN: since October 2023). Safe for modern evergreen browsers.

✓ Baseline · Widely available

ariaDisabled

Reflects aria-disabled as the strings true/false for perceivable but inoperable elements.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
ariaDisabled Excellent

Bottom line: Prefer native disabled on real buttons/inputs. For custom widgets, set ariaDisabled and also block activation in JS.

Frequently Asked Questions

It reflects the aria-disabled attribute as a string ("true" or "false"), indicating the element is perceivable but disabled — so it is not editable or otherwise operable (MDN).
No. MDN marks Element.ariaDisabled as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
The strings "true" (disabled but still perceivable) or "false" (enabled).
You assign the strings "true" and "false", not the boolean literals true/false. The property reflects the ARIA attribute value.
Yes when possible. Prefer a real button or form control with the HTML disabled attribute — they have built-in semantics and do not require ARIA (MDN).
No. Unlike HTML disabled, aria-disabled is semantic only. You must also suppress activation (and usually restyle) with your own JavaScript and CSS (MDN).

Next: ariaErrorMessageElements

Learn the element-reference property for ARIA error messages.

ariaErrorMessageElements 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 ariaDetailsElements Property JavaScript Element ariaErrorMessageElements Property