The aria-owns property identifies an element that specifies a relative connection between parents and child elements, it is possible if DOM or document object model cannot be used to present a visual relationship. The purpose of the aria-owns is to define parent and child elements with the other elements to determine its relationship. The developer can use aria-owns to provide information for the user that an element in focus belongs to a parent element or a child element that depends on the organizational structure, it may provide the necessary information for the user. The aria-owns can be used with all elements such as combo box and list box. The aria-owns can be used with other ARIA labels, such as aria-controls and aria-activedescendant.
What is the function of the “aria-owns” ARIA Label?
The purpose of the aria-owns attribute is to distinguish an element as well as its connections to other elements in terms of the hierarchical structure of the parent-child relationship between components. If an element is unable to act on its job, the aria-owns attribute supplies the attributes necessary to define it. The DOM, also known as the Document Object Model, is responsible for providing the canonical visual display of structural relationships between elements. As the rule for setting the aria-owns, there should be only one element in which the aria-owns are specified.
What are the uses of the “aria-owns” ARIA Label?
Listed below are the uses of the “aria-owns” ARIA Label.
- Toolbar role: It presents the functions that are commonly used, such as buttons, controls, and other items contained by another element in a compact form of container.
- Treeitem role: It represents being a child element of a Tree element, the tree element can node another tree element but a treeitem can not node a tree.
- Form role: It can be used to identify a set of elements on a page that gives equivalent functionality to an HTML form.
- Alert role: It is a piece of time-sensitive information that is generated by the atomic live region that provides important information for the user.
- Cell role: It represents being a child element of a row or column, it belongs to a table container or grid, it is nested in the parent element called row.
Example Uses of “aria-owns” ARIA Label
Listed below are the example uses of the “aria-owns” ARIA Label.
The aria-owns is declared to be used for identifying the relationship of an element to other elements if the DOM is unable to define it.
<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”>Gazelle</li>
<li role=”option” id=”selected_option”>Lion</li>
</ul><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”>Seal</li>
<li role=”option” id=”selected_option”>Shark</li>
</ul><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”>Nail</li>
<li role=”option” id=”selected_option”>Hammer</li>
</ul><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”>Ping pong</li>
<li role=”option” id=”selected_option”>Lawn Tennis</li>
</ul><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”>Window</li>
<li role=”option” id=”selected_option”>Door</li>
</ul>Listed below are the related ARIA Labels to “aria-owns”.
- aria-controls: The aria-controls is related to aria-owns because they are both attributes that indicate a relation to another element or elements. The aria-controls attribute gives the element that defines this attribute control over which elements’ contents are used by that element.
- aria-activedescendant: The aria-arctivedescendant is related to aria-owns because they both establish the relationships between elements to determine who is the parent and child elements. The aria-activedescendant attribute allows assistive technologies to focus on interactive items. It can be used to refer to the recent active element, informing assistive technology users of what is the current state.
- 48 Online Shopping and Consumer Behavior Statistics, Facts and Trends - August 22, 2023
- B2B Marketing Statistics - August 22, 2023
- 38 Podcast Statistics, Facts, and Trends - August 22, 2023
