A tabpanel should be labelled by its tab

Rule tabpanel-labelled · Component patterns (best practice) · impact moderate · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A tabpanel with no accessible name is announced only as a generic region. Labelling it by its tab (aria-labelledby) tells screen-reader users which panel they are in.

How to fix#

Add aria-labelledby to the tabpanel referencing the id of the tab that controls it.

Example#

<div role="tabpanel">Panel content</div>

<div><button role="tab" id="t1">One</button><div role="tabpanel" aria-labelledby="t1">Panel content</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

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• APG — Tabs