2.5.3 Label in Name

What does it mean?

Voice control users activate controls by saying what they see, for example "click Send". If the button is labelled "Send" on screen but its accessible name in the code is "Submit form", the voice command fails. Screen reader users who can see the screen are also confused when they hear something different from what is shown.

Whenever a component has a visible label made of text or an image of text, its accessible name must include that text. Best practice is to start the name with the visible text. Extra words after it are fine, for example a visible "Read more" with an accessible name "Read more about prices".

Who does it help?

• People who control the computer by voice
• Sighted screen reader users who compare what they see and hear
• People with cognitive disabilities who rely on consistent wording

Common failures

• An aria-label that replaces the visible text with different wording
• A button whose visible text is "Search" while aria-label says "Find products"
• A link built from an image of text whose alt text says something else
• Visible label word order changed in the accessible name, such as "Name first" for a visible "First name"

How we test it

• axe-core Automatic: axe-core finds typical violations. A violation is pre-filled as “fails”.

Test question: The accessible name contains the visible label text (important for voice control).

A person decides every criterion. No criterion ever passes automatically.

How to fix it

<button type="submit" aria-label="Submit the form">Send</button>

<button type="submit">Send</button>

<!-- or, if more context is needed: -->
<a href="/prices">Read more<span class="visually-hidden"> about prices</span></a>

The accessible name now matches or begins with the visible text, so a spoken "click Send" or "click Read more" works.

Practical tips

• Often the simplest fix is to remove an unnecessary aria-label and let the visible text be the name.

Official source

Understanding WCAG 2.2 at the W3C: 2.5.3 Label in Name