Tabs

A tab interface allows users to switch between panels of related content using
a row of tab controls. When implemented accessibly, tabs are fully keyboard
operable, correctly announced by screen readers, and maintain a logical focus
and selection state.
^[1]

---

ARIA roles

A tab interface requires three ARIA roles applied to the correct elements:

Role	Applied to	Purpose
tablist	The container wrapping all tabs	Groups the tabs together
tab	Each individual tab button	Identifies it as a tab control
tabpanel	Each content panel	Associates the panel with its tab
[1]

---

Required attributes

On each tab:

• role="tab"
• aria-selected="true" on the active tab, aria-selected="false" on inactive tabs
• aria-controls referencing the id of its associated tabpanel
• id (referenced by the tabpanel's aria-labelledby)

On each tabpanel:

• role="tabpanel"
• aria-labelledby referencing the id of its tab
• tabindex="0" so the panel itself can receive focus

^[2]

---

Keyboard interactions

The tab interface uses arrow key navigation inside the tablist — not Tab.
This is the most commonly misunderstood aspect of the pattern.

Key	Action
Tab	Moves focus into the tablist (to the active tab), then out to the tabpanel
Left / Right arrow	Moves focus between tabs
Home	Moves focus to the first tab
End	Moves focus to the last tab
Enter / Space	Activates the focused tab (if not using automatic activation)

---

Automatic vs manual activation

Automatic activation: The tab panel changes as the user arrows between
tabs. Focus movement triggers selection. Simpler to implement and preferred
for most use cases.

Manual activation: The user must press Enter or Space to activate a tab
after arrowing to it. Useful when tab panels are slow to load.
^[3]

---

Common mistakes

Using Tab key to move between tabs. This forces users to Tab through every
tab to reach the panel. Use arrow keys within the tablist instead.

Missing aria-selected. Without aria-selected, screen reader users cannot
tell which tab is active.

Hiding inactive panels with display: none. This is correct — inactive
panels should be hidden from all users including screen readers. Do not use
visibility: hidden or opacity: 0 alone, as these leave the content in the
accessibility tree.

---

References

1. W3C Web Accessibility Initiative. ARIA Authoring Practices Guide — Tabs Pattern. https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ ↑
2. W3C. WAI-ARIA 1.2 — tab role. https://www.w3.org/TR/wai-aria-1.2/#tab ↑
3. W3C Web Accessibility Initiative. Understanding Success Criterion 4.1.2: Name, Role, Value. https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html ↑