TheariaOwnsElements property of theElement 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,

Thearia-owns topic contains additional information about how the attribute and property should be used.

Value

An array of subclasses ofHTMLElement.

When read, the returned array is a static and read-only.When written, the assigned array is copied: subsequent changes to the array do not affect the value of the property.

Description

The property is a flexible alternative to using thearia-owns attribute to indicate ownership of an element.Unlikearia-owns, the elements assigned to this property do not have to have anid attribute.

The property reflects the element'saria-owns attribute when it is defined, but only for listed referenceid values that match valid in-scope elements.If the property is set, then the corresponding attribute is cleared.For more information about reflected element references and scope seeReflected element references in theReflected attributes guide.

Examples

Get the owned element

This example demonstrates how thearia-owns attribute and property are used.

The code defines a menu and its associated submenu in separate and non-nested<div> elements.Because these elements are not nested the ownership relationship between the menu and submenu is not captured by the DOM.Here we provide that information to accessibility tools using thearia-owns attribute, but we could also do it using the reflected property.

Note that we could construct a menu where the submenu was nested: the example has beencontrived to make it easier to demonstrate a case where the relationship needs to be defined.

HTML

The HTML defines<div> elements for the menu, withid=parentMenu and the submenu withid="subMenu1".We've added a<div> in between just to make it even more obvious that there is no direct ownership model defined in the DOM.

The parent menu<div> includes the attributearia-owns="subMenu1" to create this ownership relationship.

<div role="menubar" aria-owns="subMenu1">  Top level menu (hover over)</div><div>Some other element</div><div 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>

CSS

The CSS styles the menu and submenu, and displays the submenu when the menu is hovered over.

.menu {  position: relative;  display: inline-block;  color: purple;}.submenu {  display: none;  position: absolute;  background-color: #f9f9f9;  min-width: 160px;  box-shadow: 0px 6px 14px 0px rgb(0 0 0 / 0.2);  z-index: 1;  top: 20px;  left: 0;}.menu:hover ~ .submenu {  display: block;}.submenu a {  color: black;  padding: 12px 16px;  text-decoration: none;  display: block;}.submenu a:hover {  background-color: #f1f1f1;}

<pre></pre>

#log {  height: 80px;  overflow: scroll;  padding: 0.5rem;  margin: 5px;  border: 1px solid black;}

JavaScript

The code first checks whether theariaOwnsElements is supported.If it is, we log the attribute, the elements in the property, and theid value for each element.

const logElement = document.querySelector("#log");function log(text) {  logElement.innerText = `${logElement.innerText}${text}\n`;  logElement.scrollTop = logElement.scrollHeight;}

// Feature test for ariaOwnsElementsif ("ariaOwnsElements" in Element.prototype) {  const parentMenu = document.querySelector("#parentMenu");  log(`parentMenu.getAttribute(): ${parentMenu.getAttribute("aria-owns")}`);  log(`parentMenu.ariaOwnsElements: ${parentMenu.ariaOwnsElements}`);  parentMenu.ariaOwnsElements?.forEach((elem) => {    log(`  id: ${elem.id}`);  });} else {  log("element.ariaOwnsElements: not supported by browser");}

Result

The result of running the code is shown below.The log shows that the relationship defined using thearia-owns attribute is reflected in theariaOwnsElements property (elements in the array match the attribute element references).

Specifications

Browser compatibility

See also

• aria-owns attribute
• ElementInternals.ariaOwnsElements
• Reflected element references in theAttribute reflection guide.