WAI-ARIA: aria-owns (Property)

Description
Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. See related aria-controls.
The value of the aria-owns attribute is a space-separated list of IDREFS that reference one or more elements in the document by ID. The reason for adding aria-owns is to expose a parent/child contextual relationship to assistive technologies that is otherwise impossible to infer from the DOM.
If an element has both aria-owns and DOM children then the order of the child elements with respect to the parent/child relationship is the DOM children first, then the elements referenced in aria-owns. If the author intends that the DOM children are not first, then list the DOM children in aria-owns in the desired order. Authors SHOULD NOT use aria-owns as a replacement for the DOM hierarchy. If the relationship is represented in the DOM, do not use aria-owns. Authors MUST ensure that an element’s ID is not specified in more than one other element’s aria-owns attribute at any time. In other words, an element can have only one explicit owner.
Screen Reader
Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
MUST convey a single parent/child relationships | supported | supported | supported | supported | supported | supported | supported | supported | supported | none | none |
MUST convey multiple parent/child relationships | supported | supported | supported | supported | supported | supported | supported | supported | supported | none | none |
MUST order the references after any existing children | supported | supported | supported | supported | supported | supported | supported | supported | supported | none | none |
aria-owns Example
HTML Example
<input type="text" aria-label="Tag" role="combobox" aria-expanded="true"
aria-autocomplete="list" aria-owns="owned_listbox" aria-activedescendant="selected_option">
<ul role="listbox" id="owned_listbox">
<li role="option">Zebra</li>
<li role="option" id="selected_option">Zoom</li>
</ul>
HTML Example 2
A page contains a combobox composed of a textbox and a dropdown list of values which the user may choose from. The chosen list item becomes the value of the textbox. As the user navigates through the list via arrow keys, the aria-activedescendant property is adjusted to reflect the id attribute of the current child element which has been navigated to.
<input type="text" aria-activedescendant="cb1-opt6" aria-readonly="true"
aria-owns="cb1-list" aria-autocomplete="list" role="combobox" id="cb1-edit">
<ul aria-expanded="true" role="listbox" id="cb1-list">
<li role="option" id="cb1-opt1">Alabama</li>
<li role="option" id="cb1-opt2">Alaska</li>
<li role="option" id="cb1-opt3">American Samoa</li>
<li role="option" id="cb1-opt4">Arizona</li>
<li role="option" id="cb1-opt5">Arkansas</li>
<li role="option" id="cb1-opt6">California</li>
<li role="option" id="cb1-opt7">Colorado</li>
</ul>
Characteristics
Used in Roles
- All elements of the base markup
Value
- ID reference list
- A list of one or more ID references.
Semantic HTML
No HTML element equivalent.
Reference
- WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on aria-owns. - A11Y Support
The screenreader compatibility for each of the ARIA attributes is taken from the A11Y Support. Please refer to the original source if screenreader compatibility is updated for aria-owns.
I’ve seen two opposite examples of aria-owns usage and I believe it is related to the ARIA specification. ARAI 1.0 allows to put it on input or role=’combobox’ elements: https://www.w3.org/TR/2014/REC-wai-aria-20140320/roles#combobox
While ARIA 1.1. replaces it with aria-controls: https://www.w3.org/TR/wai-aria-1.1/#combobox
Citing from differences https://www.levelaccess.com/differences-aria-1-0-1-1-changes/
`…it is important to note that aria-owns must not be used on elements or roles that do not support children, such as HTML input elements or img elements. The same is true for combobox widgets that use role=”combobox” on an HTML input element…`
If that is correct, please, update the examples in the above section correspondingly to the usage of the current specification described.
Hello Daria,
you are right, the code examples need updating. We are working on content update in next few months and will take this as priority.
Thanks!