# Accessible Name

> Canonical HTML version: https://rocketvalidator.com/glossary/accessible-name
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

An accessible name is the text assistive technologies use to identify a UI element, derived from sources such as visible text, labels, alt text, or ARIA naming attributes.

The accessible name answers a simple question for assistive technology users: "What is this control called?"

## Why accessible names matter

Without a valid name, a control may be announced as "button" or "link" with no context. That makes core actions impossible to discover.

## How accessible names work

Browsers compute names from several sources with precedence rules. In many cases:

1. `aria-labelledby`
2. `aria-label`
3. Native label or element text
4. `title` as fallback

Consistency between visible labels and spoken names is also important for voice input users.

## Code examples

```html
<!-- Missing name -->
<button><svg><!-- icon --></svg></button>
```

```html
<!-- Explicit accessible name -->
<button aria-label="Open menu"><svg><!-- icon --></svg></button>
```

```html
<!-- Native association -->
<label for="email">Email</label>
<input id="email" type="email">
```