← All rules

ARIA

Tabs need a name

• Rule: aria-tab-name
• Severity: Serious
• WCAG level A

Why it matters

A tab with no accessible name is announced as "tab, 2 of 4" with no indication of what it opens, which makes the tabset unusable without sight.

How to fix it

1. Put the tab label as text inside the element.
2. For icon-only tabs, add aria-label with the same word the tooltip shows.
3. Make sure the icon is aria-hidden so it does not interfere with the name.

In markup

<button role="tab"><svg aria-hidden="true">...</svg></button>

<button role="tab" aria-label="Settings">
  <svg aria-hidden="true">...</svg>
</button>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

• 4.1.2 Name, Role, Value (opens in new tab) — WCAG level A

Further reading

Deque University on aria-tab-name (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.