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