aria-owns is surprisingly strong magic
aria-owns allows developers to restructure the parent-child relationships in the accessibility tree. This means that screen reader users may experience a different semantic structure and meaning to other users when they navigate and interact with content using their screen readers virtual/browse mode.
Accessibility Tree
Tree of accessible objects that represents the structure of the user interface (UI). Each node in the accessibility tree represents an element in the UI as exposed through the accessibility API; for example, a push button, a check box, or container.
Simple example
Using aria-owns to change meaning by swapping the order of words.
In the DOM: Ass Backwards
Ass
Backwards
In the Accessibility tree: Backwards Ass
paragraph:Backwards Ass
Some users get Ass Backwards and others get Backwards Ass
Try it for yourself
See the Pen
Untitled by steve faulkner (@stevef)
on CodePen.
own and owner
When you start doing more complex things with aria-owns, things start getting hairy. You may well have to add additional ARIA role attributes to your base HTML to ensure robust structure.
In the DOM: 3 single row tables
Table 1 has the caption and column headers and aria-owns referencing the id‘s of the rows in tables [...]