JavaScript Element ariaActiveDescendantElement Property

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

Definition

Element.ariaActiveDescendantElement is the current active descendant when focus is on a composite widget, combobox, textbox, group, or application (MDN). It returns an HTMLElement (or subclass), or null if none. Prefer it over the aria-activedescendant attribute when you want a live element reference (no id required).

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

Syntax

Use el.ariaActiveDescendantElement. Start with this line.

JavaScript
element.ariaActiveDescendantElement
CallWhat it does
element.ariaActiveDescendantElementPrimary signature.

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

Library declarations
JavaScript
element.ariaActiveDescendantElement

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*The current value of el.ariaActiveDescendantElement.

JavaScript Examples

Example 1 — Get Active Descendant (MDN)

Read the live element from a listbox that uses the attribute.

JavaScript
const listbox = document.getElementById("streetType");

console.log(listbox.getAttribute("aria-activedescendant"));
// → "avenue"

const active = listbox.ariaActiveDescendantElement;
console.log(active && active.textContent.trim());
// → "Avenue"
Try It Yourself

How It Works

  1. Attribute holds an id. aria-activedescendant="avenue".
  2. Property resolves it to the matching in-scope element (MDN).
  3. Read .textContent (or other fields) from that element.
  4. If none / invalid id: the property is null.

Example 2 — Set Without an id

Assign a live option element; no id string required (MDN).

JavaScript
const listbox = document.getElementById("streetType");
const lane = listbox.querySelector("[data-option='lane']");

listbox.ariaActiveDescendantElement = lane;

console.log(listbox.ariaActiveDescendantElement === lane); // true
console.log(listbox.getAttribute("aria-activedescendant"));
// → null  (attribute cleared — MDN)
Try It Yourself

How It Works

  1. Pick the option element (id optional).
  2. Assign to the property. That option becomes active.
  3. Attribute is cleared when you set the property (MDN).
  4. Assign null to clear the active descendant.

Example 3 — Feature Detect + Fallback

Use the property when present; fall back to the id attribute.

JavaScript
const listbox = document.getElementById("streetType");
const option = document.getElementById("avenue");

if ("ariaActiveDescendantElement" in listbox) {
  listbox.ariaActiveDescendantElement = option;
} else if (option.id) {
  listbox.setAttribute("aria-activedescendant", option.id);
}
Try It Yourself

How It Works

  1. Detect the property. Baseline 2025 — not on every older engine.
  2. Modern path: assign the element directly.
  3. Fallback: set aria-activedescendant to an id.
  4. Fallback needs an id on the option element.
Compatibility

Browser Support

Element.ariaActiveDescendantElement is Baseline 2025 on MDN (newly available since April 2025). Feature-detect and keep an aria-activedescendant id fallback for older engines.

✓ Baseline 2025

Element.ariaActiveDescendantElement

Reflected active descendant element — Baseline newly available.

2025 Baseline
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
ariaActiveDescendantElement Baseline 2025

Bottom line: Detect "ariaActiveDescendantElement" in Element.prototype. Prefer the property for live element refs; fall back to aria-activedescendant + id when missing.

Frequently Asked Questions

An HTMLElement (subclass) that is the current active descendant for a composite widget, or null if there is none (MDN).
No. MDN marks it Baseline 2025 (newly available since April 2025). It is not Deprecated, Experimental, or Non-standard. Older browsers may still lack it — feature-detect.
The attribute uses an id string. The property uses a live Element reference. The referenced element does not need an id. Setting the property clears the corresponding attribute (MDN).
For listboxes, comboboxes, textboxes, groups, or applications where focus stays on a container while a child option is the active one for assistive tech (MDN).
Yes. Assign an Element (or null). MDN: if you set the property, the aria-activedescendant attribute is cleared.
Yes. Custom elements can use ElementInternals.ariaActiveDescendantElement for the same relationship from inside a component.

Next: ariaAtomic

Learn how aria-atomic controls whether live region updates are announced wholly.

ariaAtomic 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 activeViewTransition Property JavaScript Element ariaAtomic Property