About This HTML Issue
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, 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 ofaria-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-ownsrelationship is evaluated.
How to fix it:
-
Check that every ID in the
aria-ownsvalue exactly matches anidattribute on an element in the same document. - Look for typos or case mismatches — IDs are case-sensitive.
-
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. -
If the element is added dynamically, ensure it exists in the DOM before the
aria-ownsrelationship 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.
<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".
<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.
<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.
<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
<!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.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.