Tabs need a name

• Rule: axe/aria-tab-name
• Checks: ARIA tab nodes must have an accessible name
• WCAG: 4.1.2
• Fix class: content: A fix needs authored text.

Who it affects

• People who use a screen reader or a braille display, most of them blind.
• People who control the page by speaking.

How to fix it

The tab shows only an icon

Name the tab for the panel it opens with aria-label, and hide the icon with aria-hidden="true". Build tabs from <button role="tab"> where you can: the button takes focus and activates with Enter and Space, but the arrow keys and the tabindex of inactive tabs are still yours to script.

<div role="tablist" aria-label="Account">
  <button type="button" role="tab" id="tab-profile" aria-selected="true" aria-controls="panel-profile" aria-label="Profile">
    <svg aria-hidden="true" focusable="false"><use href="#icon-user"></use></svg>
  </button>
  <button type="button" role="tab" id="tab-billing" aria-selected="false" aria-controls="panel-billing" aria-label="Billing" tabindex="-1">
    <svg aria-hidden="true" focusable="false"><use href="#icon-card"></use></svg>
  </button>
</div>
<div role="tabpanel" id="panel-profile" aria-labelledby="tab-profile">
  <p>Your name and photo.</p>
</div>
<div role="tabpanel" id="panel-billing" aria-labelledby="tab-billing" hidden>
  <p>Your payment methods.</p>
</div>

The tab text is in a hidden element or drawn with CSS

Put the words inside the tab as text. To hide them visually, use a class that clips them but keeps them in the accessibility tree; text inside display: none, visibility: hidden or aria-hidden="true" does not count, and axe ignores text drawn with CSS content.

Visible text outside the tab names it

Point aria-labelledby at that text by its id, so the name and the visible words stay the same.

Fixes that fail

Adding only a title attribute

axe accepts it, but it shows only while a mouse hovers, so keyboard, touch and voice control users never see what the tab is called.

Naming tabs by position, such as “Tab 1” and “Tab 2”

People choose a tab by what its panel holds. Name each tab for its content.

More on the rule

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.