JavaScript Element ariaOwnsElements Property

What You’ll Learn

Element.ariaOwnsElements is an instance property that holds an array of elements owned by the current element when the DOM tree cannot express that relationship. Learn how it relates to aria-owns, why owned nodes do not need an id when you set the property, and how to get or set the relationship from JavaScript—with five examples and try-it labs.

Introduction

Assistive technologies usually learn “what belongs to what” from the DOM: a submenu nested inside a menu, a panel inside a dialog. Sometimes layout or framework constraints force related nodes to sit as siblings (or farther apart). Then the tree no longer tells the ownership story.

aria-owns fills that gap. ariaOwnsElements is the modern element-reference form: you work with real DOM nodes instead of only managing id strings.

if ("ariaOwnsElements" in Element.prototype) {
  const owned = parentMenu.ariaOwnsElements;
  owned.forEach((elem) => console.log(elem.id));
}

Understanding the Property

MDN: the ariaOwnsElements property of the Element interface is an array containing the element (or elements) that define a visual, functional, or contextual relationship between a parent element that it is applied to, and its child elements. This is used when the DOM hierarchy cannot be used to represent the relationship, and it would not otherwise be available to assistive technology.

• Get / set — read or assign an array of elements.
• Flexible alternative to the aria-owns attribute.
• No id required on owned nodes when you set the property (MDN).
• Reflection — reads valid in-scope id refs from the attribute; setting the property clears the attribute.
• Limited availability — feature-detect before use (MDN).

📝 Syntax

ariaOwnsElements

Value

An array of subclasses of HTMLElement—the owned element(s).

• When read, the returned array is static and read-only.
• When written, the assigned array is copied—later edits to that array do not change the property.

⚖️ Property vs aria-owns Attribute

📋 Menu Owns Submenu (MDN Shape)

MDN’s example links a menubar to a separate submenu. They are not nested, so ownership is declared with aria-owns:

<div class="menu" id="parentMenu" role="menubar" aria-owns="subMenu1">
  Top level menu (hover over)
</div>

<div>Some other element</div>

<div class="submenu" id="subMenu1" role="menu">
  <a href="#" role="menuitem">Menu item 1</a>
  <a href="#" role="menuitem">Menu item 2</a>
  <a href="#" role="menuitem">Menu item 3</a>
</div>

You could also set the same relationship with parentMenu.ariaOwnsElements = [subMenu1] when the property is supported. Related reflected-element APIs: ariaLabelledByElements and ariaDescribedByElements.

Examples Gallery

Examples follow MDN Element: ariaOwnsElements. Labs feature-detect first so unsupported browsers still show a clear message.

if ("ariaOwnsElements" in Element.prototype) {
  console.log("ariaOwnsElements is supported");
} else {
  console.log("ariaOwnsElements not supported by browser");
}

ariaOwnsElements is supported

const parentMenu = document.querySelector("#parentMenu");

console.log("aria-owns:", parentMenu.getAttribute("aria-owns"));

if ("ariaOwnsElements" in Element.prototype) {
  console.log("ariaOwnsElements:", parentMenu.ariaOwnsElements);
  parentMenu.ariaOwnsElements?.forEach((elem) => {
    console.log("  id:", elem.id);
  });
} else {
  console.log("ariaOwnsElements not supported by browser");
}

aria-owns: subMenu1
ariaOwnsElements: [object HTMLDivElement]
  id: subMenu1

const parent = document.createElement("div");
const owned = document.createElement("div");
parent.setAttribute("role", "menubar");
owned.setAttribute("role", "menu");
owned.textContent = "Submenu panel";
document.body.append(parent, owned);

if ("ariaOwnsElements" in Element.prototype) {
  parent.ariaOwnsElements = [owned];
  console.log({
    count: parent.ariaOwnsElements.length,
    attrAfterSet: parent.getAttribute("aria-owns"),
    ownedRole: parent.ariaOwnsElements[0].getAttribute("role")
  });
} else {
  console.log("ariaOwnsElements not supported by browser");
}

{
  "count": 1,
  "attrAfterSet": null,
  "ownedRole": "menu"
}

const parentMenu = document.querySelector("#parentMenu");

console.log({
  fromAttribute: parentMenu.getAttribute("aria-owns"),
  supported: "ariaOwnsElements" in Element.prototype,
  fromProperty: "ariaOwnsElements" in Element.prototype
    ? parentMenu.ariaOwnsElements.map((el) => el.id)
    : null
});

{
  "fromAttribute": "subMenu1",
  "supported": true,
  "fromProperty": ["subMenu1"]
}

console.log({
  supported: "ariaOwnsElements" in Element.prototype,
  tip: "Returned array is static/read-only; assigned arrays are copied",
  prefer: "Real DOM nesting when possible; aria-owns only when needed",
  status: "Limited availability (MDN, not Baseline)"
});

{
  "supported": true,
  "tip": "Returned array is static/read-only; assigned arrays are copied",
  "prefer": "Real DOM nesting when possible; aria-owns only when needed",
  "status": "Limited availability (MDN, not Baseline)"
}

🚀 Common Use Cases

• Menus whose submenus live outside the parent node for layout reasons.
• Composite widgets where owned panels are portals or siblings in the DOM.
• Dynamic UIs that attach owned nodes without assigning ids.
• Teaching how AT discovers ownership when the tree alone is incomplete.
• Custom elements via ElementInternals.ariaOwnsElements.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN—but limited availability (feature-detect).
• Prefer real DOM nesting; use ownership only when the tree cannot represent the relationship.
• Returned arrays are static/read-only; assigned arrays are copied.
• Related: ariaPlaceholder, ariaLabelledByElements, EventTarget, JavaScript hub.

💡 Best Practices