Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

A: Elements must have their visible text as part of their accessible name (WCAG 2.5.3)

label-content-name-mismatch

Ensure that elements described by their content also include their visible text as part of the accessible name.

This means

Interactive elements such as links, buttons, or controls display visible text, but the accessible name (e.g., from aria-label, aria-labelledby, or the button content) does not contain that text. Voice control and screen readers then cannot reliably address the element using the visible wording.

Impact

Users of screen readers or voice control lose orientation. Commands like “Click Learn more” do not work if the name is, for example, “Show details.” This increases misoperation and violates WCAG.

Recommendation

  • The accessible name must include the visible text (ideally at the beginning).

  • Do not set a different aria-label if the visible text already fits—prefer using the text content.

  • Append additional context rather than replacing it (e.g., “Buy now – size M”).

  • For composite labels, use aria-labelledby and ensure the visible wording is included.

Example

Problematic

<!-- Visible: "Learn more", accessible name: "Show details" (without "Learn more") -->
<a href="/guide" aria-label="Show details">Learn more</a>

<!-- Visible: "Send", accessible name: "Submit" (different) -->
<button aria-label="Submit">Send</button>

Better

<!-- Visible text is part of the name -->
<a href="/guide">Learn more</a>

<!-- Additional context appended, visible text included -->
<button aria-label="Send – send message">Send</button>

<!-- Composite with aria-labelledby; visible wording included -->
<h2 id="buy-h">Buy now</h2>
<button aria-labelledby="buy-h">Buy now</button>

Related WCAG criterion:
WCAG 2.5.3 - Label in Name