ARIA-owns (Property)
Aria-owns 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. In other words aria-owns property defines element
relationships and associations that cannot be readily determined from the document
structure. Aria-owns sets or retrieves a list of child objects, including elements that are
not direct descendants of the current object.
aria-owns is not a replacement for the DOM hierarchy. The relation between the elements
is referred by the id attribute. aria-owns can have multiple id references. When multiple
elements are referred using aria-owns separate the id’s using a space. No element can have
multiple owners. In other words an id value used with one aria-owns cannot be used
elsewhere.
Have a look at related aria-controls (property). An example mark-up is available below using aria-
owns property.
aria-owns example
</p> <div id="application" role="application"> <h2 id="label_1">Animal or Vegetable</h2> <div id="tree1" class="tree root-level" role="tree" aria-labelledby="label_1" tabindex="-1"> <div id="animals" class="tree-parent" role="treeitem" aria-owns="animalGroup" aria- expanded="true" tabindex="0"><br /> <span>Animals</span> </div> <div id="animalGroup" class="group" role="group"> <div id="birds" class="tree-item" role="treeitem" tabindex="-1">Birds</div> <div id="cats" class="tree-parent" role="treeitem" aria-owns="catGroup" aria- expanded="false" tabindex="-1"><br /> <span>Cats</span> </div> <div id="catGroup" class="group" role="group"> <div id="siamese" class="tree-item" role="treeitem" tabindex="-1">Siamese</div> <div id="tabby" class="tree-item" role="treeitem" tabindex="-1">Tabby</div> </p></div> <div id="dogs" class="tree-parent" role="treeitem" aria-owns="dogGroup" aria- expanded="true" tabindex="-1"><br /> <span>Dogs</span> </div> <div id="dogGroup" class="group" role="group"> <div id="smallBreeds" class="tree-parent" role="treeitem" aria- owns="smallBreedGroup" aria-expanded="true" tabindex="-1"><br /> <span>Small Breeds</span> </div> <div id="smallBreedGroup" class="group" role="group"> <div id="chihuahua" class="tree-item" role="treeitem" tabindex="- 1">Chihuahua</div> <div id="italian_greyhound" class="tree-item" role="treeitem" tabindex="- 1">Italian Greyhound</div> <div id="Japanese_chin" class="tree-item" role="treeitem" tabindex="-1">Japanese </p> <p>Chin</p></div> </p></div> <div id="mediumBreeds" class="tree-parent" role="treeitem" aria- owns="mediumBreedGroup" aria-expanded="false" tabindex="-1"><br /> <span>Medium Breeds</span> </div> <div id="mediumBreedGroup" class="group" role="group"> <div id="beagle" class="tree-item" role="treeitem" tabindex="-1">Beagle</div> <div id="cocker_spaniel" class="tree-item" role="treeitem" tabindex="-1">Cocker </p> <p>Spaniel</p></div> <div id="pit_bull" class="tree-item" role="treeitem" tabindex="-1">Pit </p> <p>Bull</p></div> </p></div> <div id="largeBreeds" class="tree-parent" role="treeitem" aria- owns="largeBreedGroup" aria-expanded="false" tabindex="-1"><br /> <span>Large Breeds</span> </div> <div id="largeBreedGroup" class="group" role="group"> <div id="afghan" class="tree-item" role="treeitem", tabindex="-1">Afghan</div> <div id="great_dane" class="tree-item" role="treeitem" tabindex="-1">Great </p> <p>Dane</p></div> <div id="mastiff" class="tree-item" role="treeitem" tabindex="-1">Mastiff</div> </p></div> </p></div> </p></div> <div id="vegetables" class="tree-parent" role="treeitem" aria-owns="vegetableGroup" aria-expanded="true" tabindex="-1"><br /> <span>Vegetables</span> </div> <div id="vegetableGroup" class="group" role="group"> <div id="carrot" class="tree-item" role="treeitem" tabindex="-1">Carrot</div> <div id="tomato" class="tree-item" role="treeitem" tabindex="-1">Tomato</div> <div id="lettuce" class="tree-item" role="treeitem" tabindex="-1">Lettuce</div> </p></div> </div> </div> <p>