Accessibility Insights

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

A shopping site has a link with visible text that says, "Shop now," An 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

The visible text label is changed to "Shop children's outerwear" and the 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.

More examples