What’s the difference between aria-controls and aria-owns?
What's the difference between aria-controls and aria-owns?
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-controlsidentifies 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-ownsidentifies 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 of
aria-ownsis 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. The
aria-ownsproperty 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 for
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.