问题
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?
回答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:
aria-controlswill be applied to buttons like "previous" or "next" to point to the wrapper.aria-ownswill be applied to each element of the title list to point to each element inside the wrapper.the active element in the title list would have the
aria-selectedattribute
The intended effect is that you could move the visual focus of your screenreader to the determined element.
回答2:
The difference between -owns and -controls is that -owns creates a parent/child relationship where none exists, and -controls indicates that one thing controls the other. So A can control B, but A doesn't have to be a parent of B for that to be the case.
leonie watson
回答3:
We've found this to be especially important in 2020, as browsers and screen readers are increasing their support for aria-owns and breaking the user experience. Please check your code for aria-owns and make sure you didn't mean aria-controls.
来源：https://stackoverflow.com/questions/34003530/what-is-the-difference-between-aria-owns-and-aria-controls