Names need to include the visible label

• Rule: axe/label-content-name-mismatch
• Checks: Elements must have their visible text as part of their accessible name
• WCAG: 2.5.3
• Fix class: content: A fix needs authored text.

Who it affects

• People who control the page by speaking.
• People with cognitive, learning or attention disabilities.

How to fix it

An aria-label or aria-labelledby names the control in other words than it shows

Start the name with the visible words and add any context after them. If the visible words are enough, remove the aria-label or aria-labelledby so the text names the control.

<a href="/reports/2026" aria-label="Read more about the 2026 annual report">Read more</a>

The visible text changes but the aria-label does not

Remove the aria-label so the name follows the text, or update both in the same place. Text that swaps, such as “Show details” and “Hide details”, and translated text drift out of step first.

axe asks for review because the text is a symbol or may be a value

Check that the words people see on the control appear in its name. Text that shows a value or state, such as “On” on a switch, need not; text that labels the control must.

Fixes that fail

Putting the visible words at the end of the name, such as aria-label="Our products: read more" on a “Read more” link

axe and WCAG accept the words anywhere in the name, but some voice control software recognizes a control only when its name begins with them.

More on the rule

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.