Accessible Name

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

<!-- Missing name -->

<!-- icon -->
</svg></button>

<!-- Explicit accessible name -->

<!-- icon -->
</svg></button>

<!-- Native association -->

<label for="email">Email</label>
<input id="email" type="email">