2.5.3 Label in Name

Controls' accessible names leave out their visible labels

The name a control is given doesn't contain its visible text, so speech-input users who say what they see can't activate it.

Who it affects. People using voice control say the words they see, "click Search", and nothing happens because the control's name is something else.

How to fix it. Make the accessible name start with the visible text, or remove the aria-label so the visible text is the name.

<button aria-label="Search invoices">Search</button>
<!-- not aria-label="Go" on a button that shows "Search" -->