a11y/tabs-selected

Why

Sighted users see which tab is active from its style. A screen reader user hears "tab, 2 of 4" and nothing else unless aria-selected says which one is shown.

Fix

Bind aria-selected to the same state that styles the active tab: true on it, false on the rest. Give the active tab tabindex="0" and the others tabindex="-1", and connect each tab to its panel with aria-controls and the panel back with aria-labelledby.

Examples

<!-- bad -->
<button role="tab" class="active">Monthly</button>
<!-- good -->
<button role="tab" aria-selected="true" aria-controls="p-monthly" id="t-monthly">Monthly</button>

Sources

• WAI-ARIA Authoring Practices, Tabs pattern
• WCAG 2.2, Understanding SC 4.1.2 Name, Role, Value

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/tabs-selected