CodePark/ questions / Accessibility tree & names
START PRACTICINGPRACTICE
Frontend question · Accessibility › Accessibility tree & names

What accessible name does a screen reader announce for this input?

<label for="q">Search</label>
<input id="q" aria-label="Search products" placeholder="e.g. shoes">
"Search products"

The browser takes the accessible name from the first source it finds, in this order: aria-labelledby, then aria-label, then the native label (<label>, alt, <legend> and so on), then title or placeholder as a last resort. Here aria-label wins.

"Search" is the tempting wrong answer, because the
<label> looks like the obvious name. But aria-label overrides it. That also means sighted users and screen reader users now hear different names, which confuses voice-control users who say "click Search". Use one source of name.