Semantics
The accessible name must contain the visible text
- Rule:
label-content-name-mismatch - Severity: Serious
- WCAG level A
Why it matters
Someone using voice control says what they see: "click Place order". If aria-label says "Submit" instead, the command finds nothing and the control cannot be operated by voice at all.
How to fix it
- Make the accessible name start with, or contain, the visible label word for word.
- Add detail after the visible text rather than replacing it ("Place order now").
- Where a name adds context, prefer aria-describedby so the visible text stays the name.
In markup
<button aria-label="Submit">Place order</button><button aria-label="Place order now">Place order</button>The requirement behind it
This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:
- 2.5.3 Label in Name (opens in new tab) — WCAG level A
Further reading
Deque University on label-content-name-mismatch (opens in new tab)
Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.
Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.