A tab should point to its tabpanel

Rule tab-controls-panel · Component patterns (best practice) · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A tab is linked to the panel it reveals through aria-controls. Without that link — or when it points to something that is not a tabpanel — the relationship between a tab and its content is lost programmatically. aria-controls is APG guidance rather than a hard ARIA requirement, and inactive panels may be lazily mounted, so most findings here are warnings.

How to fix#

Give each tab aria-controls set to the id of its role="tabpanel" element, and make sure that element exists and has role="tabpanel" (at minimum while its tab is selected).

Example#

<button role="tab" aria-controls="p1">One</button>

<div><button role="tab" aria-controls="p1">One</button><div role="tabpanel" id="p1">Panel one</div></div>

WCAG success criteria#

1.3.1 Info and Relationships — Level A#

Structure and relationships conveyed visually (headings, lists, tables, labels, groups) must also be available programmatically.

Understanding 1.3.1

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• APG — Tabs