aria-controls — Indicating Which Element a Control Operates On

In this tutorial, you will learn about aria. We cover key concepts, practical examples, and best practices to help you master this topic.

aria-controls identifies the element that is controlled or affected by the current interactive element, such as a button controlling a panel or a tab controlling a tabpanel.

In this tutorial, you'll learn how to use aria-controls in ARIA implementations.

What You'll Learn

By the end of this lesson, you'll understand when to use aria-controls, how it improves screen reader context, and the relationship between controls and expands.

Why It Matters

Without aria-controls, screen reader users do not know which panel a tab controls or which menu a button opens. The relationship between controls and content is invisible.

Real-World Use

Doda Browser's tab interface uses aria-controls on each tab to reference the tabpanel it controls, and Durga Antivirus Pro uses it on accordion headers.

Control Relationships

flowchart LR
  A[Control Element] --> B[aria-controls='panel-1']
  B --> C[Content Element]
  D[Button] --> E[Controls menu list]
  F[Tab] --> G[Controls tab panel]
  H[Accordion] --> I[Controls content section]

How aria-controls Works

aria-controls references the ID of the controlled element. Screen readers can use this to offer navigation directly from the control to the content:

<button aria-controls="menu-1" aria-expanded="false">
  Open Menu
</button>
<ul id="menu-1" role="menu" hidden>
  <li role="menuitem">Quick Scan</li>
  <li role="menuitem">Full Scan</li>
</ul>

When a screen reader user focuses the button, they know it controls menu-1. Some screen readers allow jumping directly to the controlled element.

Tabs and Tabpanels

The most common use of aria-controls is in tab patterns:

<div role="tablist" aria-label="Settings">
  <button role="tab" aria-selected="true" aria-controls="panel-general" tabindex="0">
    General
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-security" tabindex="-1">
    Security
  </button>
</div>
<div role="tabpanel" id="panel-general">...</div>
<div role="tabpanel" id="panel-security" hidden>...</div>

Multiple Controlled Elements

aria-controls can reference multiple elements:

<button aria-controls="result-list status-bar">
  Run Scan
</button>
<div id="result-list">...</div>
<div id="status-bar">...</div>

Common Mistakes

• Omitting aria-controls on tabs: The tab-to-panel relationship should always be explicit.
• Using non-existent IDs: The reference silently fails.
• Not pairing aria-controls with aria-expanded: For toggles that show/hide content, use both.
• Using aria-controls when the relationship is obvious from the DOM: Still add aria-controls for explicit screen reader communication.
• Forgetting to update aria-controls when content changes: Dynamic content needs dynamic attributes.

Practice and Challenge

1. What does aria-controls indicate? Which element the current control operates on.

2. What element relationship should always use aria-controls? Tab to tabpanel.

3. Can aria-controls reference multiple elements? Yes, with a space-separated list of IDs.

4. What other ARIA attribute commonly pairs with aria-controls? aria-expanded.

5. Challenge: Create a tab panel where each tab has aria-controls referencing its panel. Implement the click handlers to show/hide panels.

FAQ

Mini Project

Build a disclosure widget (show/hide section) that uses aria-controls and aria-expanded. Include JavaScript to sync both attributes with the visibility state.

What's Next

Continue to aria-posinset and aria-setsize to learn about position in a set.