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.

This can seem like a good way to provide meaningful accessible names for screen reader users, whilst presenting a shorter label for the button to sighted people. The trouble is that someone using a speech recognition tool will not be able to see the accessible name for the button, only its visible label – which makes it difficult for them to accurately target the button using a voice command.

If there is only one “Add to cart” button on the page, tools like Dragon Naturally Speaking will correctly target the button because it doesn’t need the complete accessible name to be spoken. But if there are multiple “Add to cart” buttons on the page, then Dragon will assign each one a number, and the person using speech recognition will have to specify which of the “Add to cart” buttons they want.

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.

Categories: Technical

Comments

Jake Wilson says:

What in the world would you use this code for:

Search

2 search buttons right next to eachother?

Léonie Watson says:

@Jake

The code shows a search field with a button next to it. The accessible name for the button does double duty as the accessible name for the search field, courtesy of the aria-labelledby attribute.

bill says:

I am curious about using labels for key/value pairs in information that is not an input, and how that affects accessibility. example:

name My Name

Léonie Watson says:

@Bill can you give some more information about the use case/example?

Thanks Léonie for this article.

Arnaud says:

Thanks Léonie for yet again some great insights. One question though: considering “[button aria-label=’Subscribe me to the newsletter’]OK[/button]” is fine for SR but not for speech recognition as it will try to target “OK” and therefore not find anything if I understood well, what solution would you suggest? * sorry for the HTML formatting, I’m trying to avoid the parser to delete the code