What is the purpose of the aria-controls attribute in HTML?

The aria-controls attribute in HTML is a crucial part of the Web Accessibility Initiative's Accessible Rich Internet Applications (WAI-ARIA) specification. Its primary purpose is to establish a relationship between an interactive element (like a button, tab, or link) and the content it controls or affects.

Here's a breakdown of its purpose and usage:

1. Accessibility for Assistive Technologies:

- aria-controls is primarily used by assistive technologies, such as screen readers. It helps these technologies understand which part of the page is being controlled by a specific interactive element. This is especially important for dynamic content that appears or disappears based on user interaction.

2. Linking Interactive Elements to Controlled Content:

- When a user interacts with an element that has an aria-controls attribute, the assistive technology can inform the user about the content that is being affected. For example, if a button expands a collapsible section, aria-controls would link the button to the ID of the collapsible section.

3. How it Works:

- The value of the aria-controls attribute is the ID of the HTML element that is being controlled. This ID must be unique within the document. When an interactive element has an aria-controls attribute, it tells assistive technologies that the element is responsible for showing, hiding, or otherwise manipulating the content of the element with the specified ID.

4. Example Scenario:

- Consider a button that toggles a collapsible section:

<button aria-expanded="false" aria-controls="collapsible-section">Toggle Section</button>
<div id="collapsible-section">
  <p>This is the collapsible content.</p>
</div>

- In this example, the button has aria-controls="collapsible-section", which links it to the <div> with the ID collapsible-section. When the button is clicked, JavaScript would toggle the visibility of the <div> and update the aria-expanded attribute accordingly.

5. Best Practices:

- Always ensure that the ID specified in aria-controls matches the ID of the controlled element.

- Use aria-controls in conjunction with other ARIA attributes like aria-expanded, aria-selected, or aria-hidden to provide a complete and accurate accessibility experience.

- Test your implementation with assistive technologies to ensure it works as expected.

In summary, the aria-controls attribute is essential for creating accessible and user-friendly web interfaces, especially when dealing with dynamic content. It helps bridge the gap between interactive elements and the content they control, ensuring that all users, including those using assistive technologies, can understand and navigate the page effectively.

Learn more about this