JavaScript Element ariaHidden Property

What You’ll Learn

Element.ariaHidden is an instance property that reflects the aria-hidden attribute. Learn the true, false, and undefined tokens, how they control exposure to accessibility APIs, and how to get or set the property from JavaScript—with five examples and try-it labs.

Introduction

Sighted users and assistive technology users do not always need the same content. Decorative icons, duplicated text, or off-screen panels can clutter the accessibility tree if they stay exposed.

aria-hidden tells the accessibility API whether an element should be exposed. ariaHidden is the JavaScript reflection of that attribute.

const el = document.getElementById("hidden");
console.log(el.ariaHidden); // "true"
el.ariaHidden = "false";

Understanding the Property

MDN: the ariaHidden property of the Element interface reflects the value of the aria-hidden attribute, which indicates whether the element is exposed to an accessibility API.

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

📝 Syntax

ariaHidden

Value

A string with one of the following values:

📋 MDN Example Shape

MDN starts with aria-hidden="true" on a div, then updates it to "false" with the property:

<div id="hidden" aria-hidden="true">Some things are better left unsaid.</div>

let el = document.getElementById("hidden");
console.log(el.ariaHidden); // true
el.ariaHidden = "false";
console.log(el.ariaHidden); // false

Examples Gallery

Examples follow MDN Element: ariaHidden. Labs use a simple element so you can safely read and write the property.

const el = document.getElementById("hidden");
console.log(el.ariaHidden);

// HTML includes: aria-hidden="true"

true

let el = document.getElementById("hidden");
console.log(el.ariaHidden); // true
el.ariaHidden = "false";
console.log(el.ariaHidden); // false

true
false

const icon = document.createElement("span");
icon.textContent = "*";
document.body.appendChild(icon);

icon.ariaHidden = "true";
console.log({
  ariaHidden: icon.ariaHidden,
  attr: icon.getAttribute("aria-hidden")
});

{
  "ariaHidden": "true",
  "attr": "true"
}

const el = document.createElement("div");
el.setAttribute("aria-hidden", "true");
el.textContent = "Some things are better left unsaid.";
document.body.appendChild(el);

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

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

console.log({
  supported: "ariaHidden" in Element.prototype,
  allowed: ["true", "false", "undefined"],
  tip: "Never leave focusable controls inside aria-hidden=\"true\"",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "allowed": ["true", "false", "undefined"],
  "tip": "Never leave focusable controls inside aria-hidden=\"true\"",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Hiding decorative icons that duplicate adjacent text.
• Exposing previously off-screen or modal backdrop content again.
• Keeping visual-only flourishes out of the accessibility tree.
• Toggling AT exposure when a panel becomes relevant.
• Keeping script and markup aligned without manual setAttribute.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• aria-hidden is not a substitute for CSS hide or the HTML hidden attribute.
• Never leave focusable content inside aria-hidden="true".
• Related: ariaInvalid, ariaDisabled, EventTarget, JavaScript hub.

💡 Best Practices