JavaScript Element ariaHidden Property

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

Definition

Element.ariaHidden reflects the aria-hidden attribute: whether the element is exposed to an accessibility API (MDN).

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

Syntax

Use el.ariaHidden. Start with this line.

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

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

Library declarations
JavaScript
el.ariaHidden;

Parameters

ParameterDescription
PropertyRequired. el.ariaHidden
ValuesRequired. "true" / "false" / "undefined"

Return Value

Return ValueDescription
*The current value of el.ariaHidden.

JavaScript Examples

Example 1 — Get and Set ariaHidden (MDN)

Read the string, then expose the element with "false".

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

How It Works

  1. Select the element that has aria-hidden="true".
  2. Read ariaHidden. Starts as the string "true".
  3. Assign "false". Exposes it to the accessibility API (MDN).
  4. Use strings only — not boolean literals.

Example 2 — Hide a Decorative Icon from AT

Keep the icon on screen for sighted users; hide it from assistive tech.

JavaScript
const icon = document.getElementById("star-icon");
icon.ariaHidden = "true";
console.log(icon.ariaHidden); // "true"
// Nearby text still provides the accessible name
Try It Yourself

How It Works

  1. Pick decorative content that should not be announced.
  2. Set ariaHidden = "true". AT skips it.
  3. Keep a text label nearby so the control still has a name.
  4. Do not put buttons/links inside that hidden subtree.

Example 3 — Let the User Agent Decide

Assign the string "undefined" so exposure follows rendered state (MDN).

JavaScript
const el = document.getElementById("panel");
el.ariaHidden = "undefined";
console.log(el.ariaHidden); // "undefined"
console.log(el.getAttribute("aria-hidden")); // "undefined"
Try It Yourself

How It Works

  1. Assign the string "undefined". Not the JS value alone.
  2. Meaning (MDN): the UA decides from whether the element is rendered.
  3. Prefer omitting the attribute when you do not need an override.
  4. Use "true"/"false" only when you must force AT exposure.
Compatibility

Browser Support

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

✓ Baseline · Widely available

ariaHidden

Reflects aria-hidden for accessibility API exposure.

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
ariaHidden Excellent

Bottom line: Use string values. Never leave focusable content inside aria-hidden="true". Pair with visual hide when needed.

Frequently Asked Questions

It reflects the aria-hidden attribute as a string, indicating whether the element is exposed to an accessibility API (MDN).
No. MDN marks Element.ariaHidden as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
The strings "true" (hidden from the accessibility API), "false" (exposed as if rendered), or "undefined" (user agent decides based on whether it is rendered) (MDN).
No. CSS can hide content visually. aria-hidden="true" hides content from assistive technologies even if it remains visible. Prefer removing or inerting content you do not want announced, and never leave focusable controls inside aria-hidden="true".
The element's accessibility hidden state is determined by the user agent based on whether the element is rendered (MDN).
Yes. Custom elements can use ElementInternals.ariaHidden for the same reflected value from inside a component (MDN).

Next: ariaInvalid

Learn the Element property that marks a control as invalid for assistive tech.

ariaInvalid 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 ariaHasPopup Property JavaScript Element ariaInvalid Property