Back to Info and Examples for Accessibility Insights for Web
label-content-name-mismatch
An element's visible text must be included in its accessible name.
Why it matters
Anyone who uses speech-based interaction benefits when UI components' accessible names match their visible text. Sighted people who can't use a mouse or keyboard might use speech input. When a UI component's accessible name matches its visible text, speech input users can activate them by speaking their visible text. People with low vision might use text-to-speech when they visit a new page to get an overview of the content. Such users might be confused if the accessible names they hear don’t match the text they see on the screen. People with cognitive challenges might find it especially difficult to remember speech commands that are different from what's visible on the screen.
How to fix
Good
- Make sure the element's accessible name contains its visible text.
Better
- Make sure the element's accessible name begins with its visible text.
Best
- Make sure the element's accessible name exactly matches its visible label.
Example
Fail
aria-label attribute gives the link a more detailed accessible name: "Shop our complete line of children's outerwear." People who use speech-to-text are likely to find the mismatch confusing. People who use text-to-speech won't be able to activate the link by speaking the visible text.<a href="/children/outerwear/landing.htm" aria-label="Shop our complete line of children's outerwear.">Shop now</a>
Pass
aria-label attribute is removed. Everyone sees and hears the same text.<a href="/children/outerwear/landing.htm">Shop children's outerwear</a>
About this rule
This rule passes if the element's accessible name is or contains an exact match of its visible text.