2.5.3 Label in Name

Level: A | Principle: Operable | Since: WCAG 2.1 | Automation: Partial (axe-core)

What This Means

When a UI component has a visible text label, that same text must be included in the component's accessible name. Voice control users say what they see — if a button visually says "Search" but its accessible name is "Find content on this site", the voice command "click Search" will fail.

Who This Affects

Voice control users — say the visible label to activate controls; mismatched names make commands fail
Screen reader users — hear a different name than what's displayed, causing confusion
Cognitive disability users — see one label but assistive technology reports another, breaking their mental model

Common Pitfalls

1. aria-label that doesn't contain the visible text

<!-- Bad: visible text is "Search" but accessible name is "Find" -->
<button aria-label="Find content">
  <span>Search</span>
</button>

<!-- Good: accessible name contains the visible text -->
<button aria-label="Search products">
  <span>Search</span>
</button>

2. aria-labelledby pointing to different text

<!-- Bad: visible text is "Submit" but accessible name is "Send form" -->
<span id="btn-label" class="sr-only">Send form</span>
<button aria-labelledby="btn-label">Submit</button>

<!-- Good: aria-labelledby includes the visible text -->
<button>Submit</button>

3. Image button with alt text that doesn't match adjacent text

<!-- Bad: icon shows a magnifying glass next to text "Search",
     but alt text says "Look up" -->
<button>
  <img src="search.svg" alt="Look up" />
  <span>Search</span>
</button>

<!-- Good: alt can be empty since visible text provides the name -->
<button>
  <img src="search.svg" alt="" />
  <span>Search</span>
</button>

4. Placeholder used as label with mismatched accessible name

<!-- Bad: visible placeholder says "Email" but aria-label says "Your address" -->
<input aria-label="Your address" placeholder="Email" />

<!-- Good: use a real label that matches -->
<label for="email">Email</label>
<input id="email" type="email" />

How to Fix

Rule: accessible name must contain the visible label text

The visible text doesn't need to be the entire accessible name, but it must be included as a contiguous substring, ideally at the start.

<!-- Visible text: "Search" -->

<!-- Good: exact match -->
<button>Search</button>

<!-- Good: visible text is at the start of accessible name -->
<button aria-label="Search products and categories">Search</button>

<!-- Bad: visible text not contained in accessible name -->
<button aria-label="Find items">Search</button>

Best practice: let visible text be the accessible name

The simplest approach is to avoid overriding the accessible name at all:

<!-- Best: visible text IS the accessible name -->
<button>Search</button>

<a href="/about">About Us</a>

<label for="email">Email address</label>
<input id="email" type="email" />

When you need an expanded accessible name

If you need to provide more context for screen reader users, include the visible text at the start:

<!-- Visible: "Read more" — needs context -->
<a href="/post/42" aria-label="Read more about WCAG 2.5.3">Read more</a>

How to Test

Open DevTools, go to the Accessibility panel (Elements > Accessibility tab in Chrome), and select interactive elements one by one.
For each element with visible text, compare the visible text to the "Name" shown in the Accessibility panel. The accessible name must contain the visible text as a substring.
Check buttons, links, and form controls that use aria-label or aria-labelledby to ensure the override includes the visible text.
Test with voice control if available (macOS: System Settings > Accessibility > Voice Control) by saying "click [visible text]" for buttons and links.
Pass: Every component's accessible name contains its visible text label, ideally starting with it.
Fail: Any component has an accessible name that does not contain its visible text (e.g., button shows "Search" but aria-label is "Find content").

axe-core Rules

| Rule | What It Checks | |------|---------------| | label-content-name-mismatch | Accessible name must contain the visible label text |