Writing Accessible Tab Labels
Writing Accessible Tab Labels keeps the guidance on the wording role of tab names and their relationship to tab panels, without duplicating general button-label or keyboard-pattern guidance.
Name each tab for the panel or task it opens so the label is concise, distinct, and meaningful when used as the panel’s accessible name.
Key details
Important caveats
Scope Boundary
This page covers tab-label wording; keyboard activation, aria-selected, aria-controls, and focus management remain implementation concerns.
Further guidance
Content
Use a concise tab label that clearly identifies the content or task of the panel the tab activates.
Practical Application
Write each tab label as a concise name for the panel or task it activates, and make sibling labels distinct enough to scan as a set.
Purpose
A clear tab label helps users distinguish choices and also supplies context for the associated tab panel.
Reader Check
Could a user predict the content of each panel from the tab labels alone?
Worked Example
Example: A settings tab set might use “Profile,” “Security,” and “Notifications” rather than “Tab 1,” “Tab 2,” and “Tab 3.”
Sources and evidence
Sources are shown with the role they play in this guide. Historical or style-sensitive claims are kept within the evidence boundary described above.
- Tabs Pattern — WAI-ARIA Authoring Practices Guide (opens in a new tab)World Wide Web Consortium (W3C) · W3C APG guidance for tab and tab-list labeling relationships.