(not so) short note on being owned

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


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 [...]

Read article at html5accessibility.com

Article Taxonomies