Operable · Level A · 2.5.3
Label in Name
If a control has a visible text label — 'Search', 'Password', a product name — its accessible name has to contain that same text, ideally at the start. A speech-input user says the word they see; if the accessible name doesn't match, the command misses entirely.
- Motor
- Blind
- Cognitive
How to recognize it
Compare the visible text on a control to its accessible name (a browser's accessibility inspector shows both side by side) and check whether the visible words actually appear in the name. The clearest failure: a button that visually says 'Search' but has aria-label="Submit" — completely different words, so a voice-control user saying 'click Search' gets nothing, even though the mismatch is invisible to anyone just looking at the screen. A subtler version: a product card that's one big clickable link with a visible heading like 'Wireless Mouse,' but the link's aria-label was rewritten as 'View product' — the actual product name is gone from the accessible name entirely. Same failure with buttons like visible 'Next' relabeled as aria-label="Continue to page 2" — the accessible name adds real information but drops the word that was actually on the button.
How to fix it
Whatever text is visible on the control has to appear, more or less verbatim, inside the accessible name — put it at the start. If a screen reader user needs more context than the visible text alone provides (disambiguating several identical-looking 'View product' cards, for instance), append that context after the visible text rather than replacing it: aria-label="Wireless Mouse — view product details" keeps 'Wireless Mouse' intact and adds to it, instead of aria-label="View product" which throws it away. This is a different failure from 2.4.4's ambiguous-link-text problem — there, the text itself (visible and accessible) is unclear; here, the visible text is often perfectly clear on its own, it's just that the accessible name someone rewrote no longer matches it.
Example
Avoid
<button aria-label="Submit">Search</button><a href="/product/42" aria-label="View product">Wireless Mouse</a><button aria-label="Continue to page 2">Next</button>Prefer
<button aria-label="Search products">Search</button><a href="/product/42" aria-label="Wireless Mouse — view product details">Wireless Mouse</a><button aria-label="Next: page 2">Next</button>