Register for our upcoming webinars and office hours!View upcoming events
Overwhelmed by WCAG success criteria?Accessible Web RAMP is the easiest way to discover, understand, and resolve web accessibility issuesthat matter most to your users.Try for Free
Question
What's the difference between aria-controls and aria-owns?
Answer
The aria-controls
property and the aria-owns
property are both used when the relationship between elements cannot be determined from the DOM, but they each communicate a different type relationship.
aria-controls
identifies the element(s) whose contents are controlled by the current element. In other words, its purpose is to indicate that an element controls another one. Examples include control buttons for a video, or a button that opens and closes a collapsible element.aria-owns
identifies an element (or elements) that is a child of the current element through a visual, functional, or contextual relationship, and this property is used in cases when the DOM hierarchy cannot represent the parent-child relationship. The purpose ofaria-owns
is to imply that an element depends on the current one when the relation cannot be determined by the hierarchy structure. For example, imagine a case with a calendar pop-up that is visually presented close to a parent menu, but it cannot be nested in the DOM within the parent menu because it would affect the visual presentation. Thearia-owns
property can be used to communicate to assistive technology that the calendar pop-up is a child of the parent menu. When possible, it's best to represent parent-child relationships in the DOM and avoid the need foraria-owns
.
Free Tools to Continue Learning
Accessible Web RAMP
Monitor your website and manage your progress towards WCAG conformance.
Accessible Web Academy
Career specific courses to help power up your accessibility knowledge.
Newest Questions
When you manually test on screen readers, do you test all the different versions, or would one work the same?
- Assistive Technology
- screen readers