Accessible names on controls

What it checks

For every visible interactive element on the rendered page (native and non-native, as counted by Native interactive controls), the extension looks for a name in this order:

1. an aria-label
2. an aria-labelledby reference
3. a <label> that wraps the control or points to it with for
4. the element’s own text
5. a title attribute
6. the alt text of the element or of an image inside it
7. a value attribute

A control with none of these has no accessible name. An agent choosing what to click has nothing to go on.

Results

Status	When
Pass	Every control has an accessible name
Warn	Some controls are unnamed, up to 25% of them
Fail	More than 25% of controls are unnamed
N/A	The page has no interactive controls
Unmeasured	The extension could not read the page (open it in the active tab)

The result lists locators for the unnamed controls.

How to fix

Give every control visible text, or label it. Icon-only buttons are the most common cause:

<!-- Before -->
<button class="search-toggle"><svg>…</svg></button>

<!-- After -->
<button class="search-toggle" aria-label="Search"><svg aria-hidden="true">…</svg></button>

For an image link, put the name in the image’s alt text.