aria-tab-name
Web validation
tab role must have an accessible name.A tab is a selectable control within a tablist that displays an associated panel of content. For people who use assistive technologies, it's essential that each tab has an accessible name. This allows them to understand the purpose or destination of each tab within the interface.
The accessible name can be derived from text content, or explicitly defined using aria-label or aria-labelledby. Without it, assistive technologies cannot convey meaningful information, making the tabbed interface unusable.
Pass Patterns
tab named by its text content
This tab has visible text content, which provides its accessible name.
<div role="tablist">
<div role="tab">Today's Tasks</div>
</div>tab named by an aria-label attribute
This tab uses an aria-label to provide an accessible name, even though there is no visible text.
<div role="tablist">
<div role="tab" aria-label="User profile options"></div>
</div>tab named by an aria-labelledby attribute
This example uses aria-labelledby to reference another element containing the label text.
<span id="label1">Reports</span>
<div role="tablist">
<div role="tab" aria-labelledby="label1"></div>
</div>Fail Patterns
An empty tab with no labeling attribute
This tab has no accessible name at all. No inner text or labeling attribute.
<div role="tablist">
<div role="tab"></div>
</div>A tab with an empty aria-label attribute
This tab has an empty aria-label, which means its name is still missing.
<div role="tablist">
<div role="tab" aria-label=""></div>
</div>A tab with an aria-labelledby and no corresponding element
This example uses aria-labelledby to point to a non-existent element, which results in no accessible name.
<div role="tablist">
<div role="tab" aria-labelledby="missingLabel"></div>
</div>WCAG techniques
Sufficient techniques
- ARIA14: Using aria-label to provide an accessible name where a visible label cannot be used
- ARIA16: Using aria-labelledby to provide a name for user interface controls
- G108: Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes
Failure techniques
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page, open a screen reader.
- Navigate to a tablist component on the page.
- Use arrow keys to move between tab elements, and listen to what the screen reader announces.
Expected result: Each tab element should be announced with a descriptive accessible name.
Actual result: If the name is missing, the screen reader may announce nothing or only a generic role like “tab”.
Inspecting the browser dev-tools
- Open the Accessibility Tree panel.
- Select the
tabelement on the DOM tree.
Expected result: The Name field shows the text provided as the accessible name.
Actual result: If unnamed, Name is empty.
FAQ
How does this issue relate to 4.1.2 Name, role, value?
When a tab lacks an accessible name, screen-reader and voice-control users cannot announce or display its purpose. Screen reader users will have to guess, or navigate into the content to understand if this is the content they were looking for. Voice-control users may have difficulties to activate the tab.
Why is this issue marked as Serious?
A tab is an interactive control. Without an accessible name, screen reader and voice-control users cannot tell what the tab is for or reliably activate it, which can make the whole tabbed interface unusable for them. Because it blocks a core interaction and is a direct failure of a Level A success criterion (4.1.2 Name, Role, Value), it is rated serious.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 4.1.2 Name, Role, Value (A) | For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies. |
| EN 301 549 | 9.4.1.2 Name, Role, Value | Same as the WCAG text. |
| 508 Trusted Tester | 1.3.1-programmatic-label, 5.C | The combination of the accessible name, accessible description, and other programmatic associations (e.g., table column and/or row associations) describes each input field and includes all relevant instructions and cues (textual and graphical). |