ariacontrols

aria-controls is a WAI-ARIA attribute used to indicate the ID or IDs of the element(s) that are controlled by the current element. It is part of the accessibility framework that helps assistive technologies understand relationships between parts of a user interface.

The attribute is typically applied to interactive widgets such as buttons, links, or other controls that reveal, hide, or otherwise manipulate another region of the page, for example a collapsible panel, a dropdown menu, or a tab panel. It is commonly used in conjunction with other ARIA states such as aria-expanded to convey the current visibility or state of the controlled content.

Syntax and semantics: aria-controls accepts one or more element IDs, separated by spaces. The IDs refer to elements within the same document. aria-controls does not create or move content by itself; it simply communicates which elements are controlled by the element bearing the attribute. It is often paired with other attributes like aria-expanded to reflect dynamic changes in the interface.

Compatibility and considerations: aria-controls is supported by major screen readers and modern browsers. As with other ARIA attributes, developers should ensure that the controlled elements have appropriate roles and that state changes (such as expanding or collapsing) are conveyed through complementary attributes (e.g., aria-expanded, aria-hidden) and visible focus management.

Examples and patterns: a button with aria-controls="panel1" may hide or reveal a region with id="panel1". A single element may control multiple targets by listing several IDs separated by spaces. This attribute helps users understand which content is affected by a control, improving navigability and accessibility.