Label in Name
When a control has visible text, that exact text must appear at the start of its accessible name. Otherwise voice-control users who say what they see cannot activate the control.
What it asks
If a button reads “Submit application” on screen, a voice-control user should be able to say “click Submit application” and have the click land. That only works when the visible label is contained in the accessible name — ideally as the first words. If the accessible name is “Send form” while the visible text says “Submit application,” the voice command fails silently.
WCAG requires that the visible text label be part of the accessible name. The accessible name can include more (clarifying context) but the visible text has to be in there, in the same word order.
How to meet it
- For buttons and links with text, do nothing special — the text content becomes the accessible name automatically.
- When you add
aria-labelto a control that already has visible text, include the visible text at the start:<button aria-label="Submit application — opens confirmation">Submit application</button>. - For icon + text buttons, let the text drive the name. Do not override it with an icon-only
aria-label. - For links where the text reads “Read more,” extend the accessible name with
aria-label="Read more about WCAG 2.2 — full article"so the visible “Read more” is still the prefix. - When a control’s visible label is an image (icon with text overlay, logo), make sure the
altmatches the visible text exactly.
Common failures
- A button reading “Search” with
aria-label="Find". Voice users say “click Search,” nothing happens. - “Add to cart” buttons with
aria-label="Add Blue T-Shirt size M to your shopping cart"— verbose name, visible “Add to cart” no longer the prefix. Voice command “click Add to cart” misses. - Icon-and-text buttons where the designer added
aria-label="cart icon"and clobbered the visible “Checkout” text. - Localized sites where the visible text was translated but the
aria-labelis still in English. - Floating action buttons that show “Chat” visibly but carry
aria-label="Open support widget".
Why it matters
This is the SC that gates accessibility for voice-control users — people using Dragon NaturallySpeaking, Voice Control on iOS / macOS, Voice Access on Android, or Windows Speech Recognition. For these users, the visible label is the command. A mismatch isn’t a minor inconvenience; it is the difference between operable and not. It also helps screen-reader users follow along when a sighted helper says “click the Save button” — the announcement matches the words on screen. 2.5.3 is easy to fix and easy to miss, because automated tools rarely flag it: a developer reading the code sees an aria-label and assumes that’s good. Always check the accessible name against the visible text.