Level AWCAG 2.2

2.5.3 Label in Name

For UI components with visible labels, the accessible name contains the visible label text.

Why it matters

Voice control
If the screen reads 'Search' but aria-label differs, saying 'click Search' won't work.
Screen readers
When visible labels and spoken labels diverge, it's hard to get help from sighted users.
Cognitive disabilities
Mismatch between display and speech causes confusion. Consistency aids understanding.
Collaboration
When told 'press the Search button', assistive technology users may not find it.

Live demo

Visible labels and accessible names

The visible label and the accessible name do not match, which confuses voice-control users.

Button

Visible: "Search"
aria-label: "find-content"

Input

Email address
Visible: "Email address"
aria-label: "email-input"

Link

View details
Visible: "View details"
aria-label: "click-here"

Voice command simulation

User: "Click Search"

→ Failure: no element with the accessible name "Search" was found

Visible labels and accessible names do not match

Understanding through personas

Takahashi (45) — Cervical spinal cord injury

I use voice recognition to operate my PC. When a button says 'Submit' but I say 'click Submit' and nothing happens because the aria-label is 'submit-form', having every element read out by number is exhausting.

Checkpoints

References