---
title: "Accessible names on controls · Sitebulb Labs"
description: "An agent picks controls by their names, so it will struggle to use buttons that have none."
url: https://labs.sitebulb.com/docs/checks/agent-experience/ax-accessible-names/
---

# Accessible names on controls

An agent picks controls by their names, so it will struggle to use buttons that have none.

- Category

  [Agent experience](https://labs.sitebulb.com/docs/checks/agent-experience)

- Standard

  Recommended

## What it checks

For every visible interactive element on the rendered page (native and non-native, as counted by [Native interactive controls](https://labs.sitebulb.com/docs/checks/agent-experience/ax-native-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:

```html
<!-- 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.