Accessible name must contain the visible label text

Rule label-content-name-mismatch · Forms · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Speech-input users activate a control by speaking its visible label. If the accessible name (e.g. an aria-label) omits that visible text, the spoken command fails even though the label is right there on screen.

How to fix#

Make the accessible name start with — or at least contain — the visible label text. Prefer not to override visible text with a different aria-label.

Example#

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

<button aria-label="Send message">Send</button>

Example#

<a href="/next" aria-label="Forward">Continue reading</a>

<button type="button" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Example#

<div role="tab" aria-label="Home">Dashboard</div>

<div role="tab" aria-label="Dashboard overview">Dashboard</div>

Named-from-content widgets (tabs, menu items, custom checkboxes/switches) are covered too — the aria-label must contain the visible text a speech user would say.

WCAG success criteria#

2.5.3 Label in Name — Level A#

A control’s accessible name must contain its visible label text, so speech-input users can activate it by name.

Understanding 2.5.3

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• WCAG — Label in Name