Rule ID: ace-aria-tab-name

Check that ARIA tab elements have descriptive accessible names

WCAG 2.0 (A) 4.1.2: Name, Role, Value Blind Deafblind Mobility Legal Risk

What This Rule Checks

Tab elements with ARIA role=”tab” must have accessible names so screen reader users can identify and navigate between tabs. Without a clear label, users cannot distinguish tabs or understand their purpose within tabbed interfaces.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.

Why This Matters

Tabs without accessible names are announced as “tab” with no description. In tabbed interfaces with multiple tabs, screen reader users cannot identify which tab to select to find the content they need.

How to Fix

Add an accessible name to each tab element using aria-label, aria-labelledby, or visible text content. Ensure the label clearly describes the tab panel it controls.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Tab with no accessible name -->
<div role="tablist">
  <div role="tab" aria-selected="true"></div>
  <div role="tab" aria-selected="false"></div>
</div>

Copy

Correct Markup Solutions:

Code example

<!-- Tabs with accessible names -->
<div role="tablist" aria-label="Account settings">
  <div role="tab" aria-selected="true">
    General
  </div>

  <div role="tab" aria-selected="false">
    Security
  </div>
</div>

Copy

Common Mistakes to Avoid

Using only icons inside tab elements without text or aria-label.
Not providing text content or aria-label on dynamically created tabs.
Labeling tabs with generic text like “Tab 1” and “Tab 2”.

AI Auto-Fix Available

This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.

Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.

Related WCAG Criteria

4.1.2: Name, Role, Value