Moving nodes in the accessibility tree

The most basic use of aria-owns is to move a node in the accessibility tree. In this example, there are three profile images in a row, and immediately below each image is a button to open the profile. In the DOM, the three images come first and the three buttons come next, so the semantic order in the accessibility tree is wrong. With aria-owns we can move the buttons in the accessibility tree without affecting the DOM tree.

Check out the code, then explore the before and after examples using a screen reader or accessibility inspection tool.

      <div>
        <img src="redthumb.png" alt="Red profile">
        <span aria-owns="redbutton"></span>
        <img src="greenthumb.png" alt="Green profile">
        <span aria-owns="greenbutton"></span>
        <img src="bluethumb.png" alt="Blue profile">
        <span aria-owns="bluebutton"></span>
      </div>
      <div>
        <button id="redbutton">Red profile</button>
        <button id="greenbutton">Green profile</button>
        <button id="bluebutton">Blue profile</button>
      </div>

Without aria-owns

With aria-owns

Reordering children

Another use of aria-owns is to keep the existing children of an HTML element, but simply reorder them so that it makes more sense for accessibility. In this example, the DOM order is backwards, but using aria-owns, the accessibility tree will have the list items in the correct order.

      <ul aria-owns="first second third">
        <li id="third">Third</li>
        <li id="second">Second</li>
        <li id="first">First</li>
      </ul>

Without aria-owns

• Third
• Second
• First

With aria-owns

• Third
• Second
• First

Building a list

Another use of aria-owns is to construct an ARIA list when there isn't a suitable container element as the parent of the list items.

      <div role="list" class="list-group" aria-owns="item1 item2"></div>
      <div id="item1" role="listitem" class="list-group-item">Item One</div>
      <div id="item2" role="listitem" class="list-group-item">Item Two</div>

Without aria-owns

With aria-owns

Building a grid

Similarly aria-owns can be used to construct an ARIA grid.

      <div role="grid" aria-owns="row1 row2"></div>
      <div id="row1" role="row">
        <div role="gridcell">Cell 1, 1</div>
        <div role="gridcell">Cell 1, 2</div>
        <div role="gridcell">Cell 1, 3</div>
      </div>
      <div id="row2" role="row">
        <div role="gridcell">Cell 2, 1</div>
        <div role="gridcell">Cell 2, 2</div>
        <div role="gridcell">Cell 2, 3</div>
      </div>

Without aria-owns

With aria-owns

Dynamic changes

Aria-owns should work correctly if aria-owns is dynamically added to an element.

Add aria-owns to list

Aria-owns should also work correctly if aria-owns references an element it that's not on the page, and it later gets added.

References

aria-owns in the ARIA spec.