# The “aria-owns” attribute must point to an element in the same document.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-aria-owns-attribute-must-point-to-an-element-in-the-same-document
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `aria-owns` attribute is used to define parent-child relationships in the accessibility tree that aren't reflected in the DOM structure. For example, if a menu visually "owns" items that are placed elsewhere in the markup (perhaps for layout reasons), `aria-owns` tells assistive technologies that those elements should be treated as children of the owning element. The attribute accepts a space-separated list of one or more IDs.

According to the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/#aria-owns), each ID referenced by `aria-owns` must correspond to an element in the same document. If no matching element is found, the relationship is broken and the accessibility tree becomes inaccurate. This can confuse screen readers and other assistive technologies, potentially making parts of your page inaccessible or misrepresented to users who rely on them.

**Common causes of this error:**

- **Typos in the ID value** — a small misspelling like `aria-owns="drpdown-menu"` instead of `aria-owns="dropdown-menu"`.
- **Referencing an element that doesn't exist** — the target element was removed or never added to the page.
- **Referencing an element in a different document** — the target lives inside an `<iframe>` or a shadow DOM, which are separate document contexts.
- **Dynamic content timing** — the referenced element is added to the DOM by JavaScript after validation or after the `aria-owns` relationship is evaluated.

**How to fix it:**

1. Check that every ID in the `aria-owns` value exactly matches an `id` attribute on an element in the same document.
2. Look for typos or case mismatches — IDs are case-sensitive.
3. If the target element is inside an `<iframe>`, restructure your markup so both elements are in the same document, or use a different ARIA approach.
4. If the element is added dynamically, ensure it exists in the DOM before the `aria-owns` relationship is needed by assistive technologies.

## Examples

### Incorrect — referencing a nonexistent ID

The element with `id="dropdown-items"` does not exist anywhere in the document, so the `aria-owns` reference is broken.

```html
<button aria-owns="dropdown-items">Open Menu</button>
<!-- No element with id="dropdown-items" exists -->
```

### Incorrect — typo in the referenced ID

The button references `"menu-lst"` but the actual element has `id="menu-list"`.

```html
<button aria-owns="menu-lst">Options</button>
<ul id="menu-list">
  <li>Option A</li>
  <li>Option B</li>
</ul>
```

### Correct — referenced ID exists in the same document

The `aria-owns` value matches the `id` of an element present in the same page.

```html
<button aria-owns="menu-list">Options</button>
<ul id="menu-list">
  <li>Option A</li>
  <li>Option B</li>
</ul>
```

### Correct — multiple IDs referenced

When `aria-owns` lists multiple IDs, each one must have a corresponding element in the document.

```html
<div role="tree" aria-owns="branch1 branch2 branch3">
  File Explorer
</div>
<div role="treeitem" id="branch1">Documents</div>
<div role="treeitem" id="branch2">Pictures</div>
<div role="treeitem" id="branch3">Music</div>
```

### Complete valid example

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>aria-owns Example</title>
  </head>
  <body>
    <div role="combobox" aria-expanded="true" aria-owns="suggestions">
      <input type="text" aria-autocomplete="list">
    </div>
    <ul id="suggestions" role="listbox">
      <li role="option">Apple</li>
      <li role="option">Banana</li>
      <li role="option">Cherry</li>
    </ul>
  </body>
</html>
```

In this example, the combobox uses `aria-owns` to claim the `suggestions` listbox as its child in the accessibility tree, even though the `<ul>` is a sibling in the DOM. Because the `id="suggestions"` element exists in the same document, the reference is valid and assistive technologies can correctly associate the two.
