What is the difference between aria-owns and aria-controls

Question

What is the real impact on an element when using

aria-owns="id"

and(!)

aria-controls="id"

How do the browsers notify the screen readers when these two attributes are used?

Answer 1

Both aria-controls and aria-owns are used when the relation between the two element can't be determined from the DOM hierarchy itself.

aria-controls is intended to indicate that an element controls another one. E.g. control buttons for a video for instance, a toolbar for a visual editor or a button for a collapsible element. Screen readers like jaws will announce a shortcut to move the visual focus to the element. This requires the element to be in the visual flow (no display:none).

aria-owns indicate that an element depends on the current one when the relation can't be determined by the hierarchy structure.

To sum up, with an example, if you have a carousel with three parts:

• on the left the clickable title list of each element in the carousel,
• on the right the wrapper for the slides
• on the bottom, the next and the previous buttons.

Result:

1. aria-controls will be applied to buttons like "previous" or "next" to point to the wrapper.

2. aria-owns will be applied to each element of the title list to point to each element inside the wrapper.

3. the active element in the title list would have the aria-selected attribute

The intended effect is that you could move the visual focus of your screenreader to the determined element.