What’s the difference between aria-controls and aria-owns?

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 of aria-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. The aria-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 for aria-owns.