WCAG 2.5.3 — Label in Name
A control's accessible name must include its visible text. Voice-input users say what they see; if the accessible name doesn't start with the visible label, the voice command misses.
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".
Edge cases
- Icon-only controls have no visible text, so this criterion is
satisfied trivially as long as the
aria-labelmakes 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.