WCAG 2.5.3 — Label in Name

What this requires

When a control has visible text — the label on a button, the text next to a checkbox, the link text inside an anchor — the control's programmatic accessible name must include that visible text. The visible text doesn't have to be the entire accessible name, but it has to be in there, and ideally at the start. Voice-control software like Dragon, Voice Access, and macOS Voice Control all match on the visible text first.

How AI coding tools fail this

The most common failure: aria-label that overrides the visible text entirely. AI assistants reach for aria-label when they want to "add context" — a button visibly labelled "Save" gets aria-label="Save changes to project". The screen reader announces the overridden label, ignoring "Save", and the voice-control user saying "Save" hits nothing.

The second pattern: visible text appearing inside the button but aria-labelledby pointing somewhere else. A toolbar button shows "Delete" but is labelled by a tooltip span that says "Remove this row from the table". The screen-reader name and the visible label diverge completely.

The third: icon-only buttons that include a hidden text label whose words don't match the visible icon's semantic meaning. A trash-can icon with aria-label="Move to archive" works correctly when read but fails the voice-control user who says "delete" or "trash".

Failing examples

Visible "Save" overridden by a longer aria-label:

<button aria-label="Save changes to project">Save</button>

A link where the visible text and the accessible name diverge:

<a href="/billing" aria-label="Manage billing">View invoices</a>

Passing examples

Lead with the visible text, then add the extra context:

<button aria-label="Save changes to project">
  <span aria-hidden="true">Save</span>
  <span className="sr-only">Save changes to project</span>
</button>

Or just let the visible text be the whole name:

<button>Save changes to project</button>

Edge cases

Icon-only controls have no visible text, so this criterion is satisfied trivially as long as the aria-label makes sense. But consider visible labels anyway — they help everyone.
Punctuation differences ("Save" vs. "Save!") are tolerated. The visible text needs to be substantially present, not byte-identical.
Tooltip text is not a visible label for this criterion's purpose unless it's persistently visible. Hover-only tooltips don't count.
Translated UIs need this checked per locale. A button visibly "Guardar" with aria-label="Save changes" (left in English) fails for Spanish-speaking voice-control users.
Brand or marketing copy with non-standard punctuation should generally be normalised in the accessible name — but the visible words still have to be in there.

How Jeikin handles this

Jeikin's MCP server compares the visible text of interactive elements to their accessible name and flags divergence. The AI assistant is reminded that aria-label replaces the accessible name rather than augmenting it — the right pattern is usually no aria-label at all, or aria-label starting with the visible text.