A tablist must have exactly one selected tab

Rule tab-selected-state · Component patterns (best practice) · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

In the ARIA tabs pattern each role="tab" exposes its state via aria-selected, and exactly one tab in a tablist is selected at a time. A missing state, or zero/multiple selected tabs, leaves assistive-technology users unsure which panel is showing.

How to fix#

Add aria-selected to every tab. Set aria-selected="true" on the active tab and aria-selected="false" on the rest; update them as the user switches tabs.

Example#

<div role="tablist"><button role="tab">One</button><button role="tab">Two</button></div>

<div role="tablist"><button role="tab" aria-selected="true">One</button><button role="tab" aria-selected="false">Two</button></div>

WCAG success criteria#

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