WCAG 2.5.3 — Label in Name, explained with examples

Why this criterion exists

Voice control users say what they see ("click submit"). If the visible label is "Submit" but the aria-label is "Send form", voice control fails.

If you only remember one thing: for ui components with labels that include text, the accessible name must contain the visible label text. Everything else on this page is detail.

Who feels it when this fails

Accessibility criteria sometimes feel abstract until you see who pays the cost when a site ignores them. Label in Name affects:

• Voice control users (Dragon, Voice Control, Voice Access)

How sites typically fail it

These are the patterns we see week after week. None are intentional — they are accidents of how teams build interfaces under deadline. Knowing the failure modes is the fastest path to writing them out of your component library.

• <button aria-label="Send"> with visible text "Submit"

How to test for it

• Compare every visible label to its accessible name (DevTools accessibility pane).

A code fix you can copy

Either omit aria-label and let the visible text be the name, or include the visible text inside the aria-label.

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

<button>Submit</button>
<!-- Or, if you must extend: -->
<button aria-label="Submit signup form">Submit</button>

Other Operable criteria