What is an accessible name?

Many HTML elements have an accessible name. It can be derived from different sources, and browsers use an algorithm called the Accessible Name and Description Computation to figure it out.

The accessible name for a HTML element is exposed in the browser’s accessibility tree. It is the piece of information used by Assistive Technologies (AT) to identify the element. For example, someone using a speech recognition tool can target the element using its accessible name, or someone using a screen reader will hear the accessible name announced as they moved focus to that element.

The accessible name for an element can be derived from the element’s content, an attribute, or from an associated element.

Using the element’s content

The content of an <a> element gives the link its accessible name. The accessible name for the following link is “Chamukos tequila”.

<a href="tequila.html">Chamukos tequila</a>

So someone using a speech recognition tool would say something like “Click chamukos tequila link”, and a screen reader would hear something like “Chamukos tequila link” when they move focus to it. Check out this screen reader demo to hear how an HTML link sounds.

Using an attribute

The accessible name for an image is derived from the alt attribute. The accessible name for the following image is “Chamukos tequila”.

<img src="tequila.png" alt="Chamukos tequila">

These two sources for an accessible name can be combined. When an image is the only content of a link, the image’s alt attribute gives the link its accessible name.

<a href="tequila.html"><img src="tequila.png" alt="Chamukos tequila"></a>

When a link contains both an image and some text, the two combine to form the link’s accessible name. The accessible name for the following link is “Chamukos tequila £40”.

<a href="tequila.html"><img src="tequila.png" alt="Chamukos tequila"> £40</a>

Using an associated element

The accessible name for a form control can be derived from an associated element. The accessible name for the following checkbox is “Chamukos tequila”.

<input type="checkbox" id="tequila">
<label for="tequila">Chamukos tequila</label>

The for attribute on the <label> and the id attribute on the <input> share the same value. This creates an association between the two elements that instructs the browser to expose the content of the label as the accessible name for the checkbox.

Using ARIA

The accessible name for an element can be altered using ARIA. The aria-label and aria-labelledby attributes work in different ways, but the important thing to remember is that ARIA trumps all; the accessible name provided with the native HTML will be overridden by the accessible name provided with ARIA.

With aria-label

The aria-label attribute takes a string as its value. It can be used to provide an alternative accessible name for an element.

<button aria-label="Add Chamukos tequila to cart">Add to cart</button>

The accessible name for this button is “Add Chamukos tequila to cart”, not “Add to cart” because the ARIA overrides the HTML.

With aria-labelledby

The aria-labelledby attribute takes an id ref as its value. It’s used when the text you want to use as an accessible name is located elsewhere on the page.

<input type="search" aria-labelledby="this">
<button id="this">Search</button>

Choosing accessible names

Choose accessible names with care. If there are two things on a page that do exactly the same thing, give them the same accessible name. For example, two links that point to the same destination should have the same accessible name. Conversely, if there are six buttons on a page that all do different things, each one should have an accessible name that is unique and distinct from the rest.

Thanks to Eric Wright for help understanding Dragon behaviour.