Reviewing aria-owns

Example

The aria-owns attribute identifies an element (or elements) in order to define a visual, functional, or contextual relationship between a parent and its child elements when the DOM hierarchy cannot be used to represent the relationship.

In this example, the first list owns two other elements: aaa and bbb. This means Bananas and Apples would be appended to the first list.

When more than one element is referenced, they are added to the accessibility tree in the order they appear in the aria-owns attribute, not their order in the DOM. In this example, bbb appears before aaa, so Bananas comes before Apples.

Note: aria-owns has inconsistent support across browser and screen reader combinations and should be avoided where possible. It is generally better to organise related elements in the correct DOM order rather than relying on aria-owns to change the accessibility tree.

<ul aria-owns="bbb aaa">
  <li>Fruit</li>
  <li>Vegetables</li>
</ul>
<p>Lorem ipsum dolor sit amet...</p>
<ul>
  <li id="aaa">Apples</li>
  <li id="bbb">Bananas</li>
</ul>

Possible accessibility tree result:

- Fruit
- Vegetables
- Banana
- Apple

Testing home