The accessible name in HTML

Introduction #

The name of the interface components also called accessible name, is basically the name who will be exposed to assistive technology AT via the accessibility API. This name is calculated by the browser via an algorithm called Accessible Name and Description Computation 1.1.
In fact, to make it simple, the browser will generate an accessible tree from the DOM (Document Object Model) in which a large majority of HTML elements (those with only a presentation purpose, eg div and span tags do not have utility) need a (accessible) name to be correctly identified by the AT.

The accessible name is derived from the content of a tag, attributes of this tag or an element associated with it.

In practice, how does it work? #

The accessible name is, for example, announced by a screen reader when the focus is on this element but the role of the element is also added (link, graphic, button…).

Access to the accessible name via the browser #

To access the (accessible) name, the easiest way is to use the tools of browsers.

In Chrome, in Chrome dev tools (Ctrl+ Shift + i), inspect an element ("Elements" tab) and open the "Accessibility" panel instead of "Style" "(usually on the right). Access to the "Accessibility tree" and in "Computed properties" you have to the "Name", the accessible name of the item being inspected.

Panels of Chrome Development Tools with Open Accessibility Tree

In FireFox, in dev tools (Ctrl+ Shift + i), open the "Accessibility" tab (to display the "Options" of dev tools), inspect an element. You access the "Name", the accessible name of the inspected item.

Firefox Development Tool Panels with Open Accessibility Tab

Content of a tag #

<a href="ducks.html">plastic ducks</a>

Here, the name of the link is the content (text10) of it: "plastic ducks". A screen reader user to take focus on this item will hear: "plastic ducks link". For a voice command user, to click on this link, will say: "click plastic ducks link".

So an item of this type <button type="submit"></button> without a title, will not be accessible, of course!

Also, we can add the elements to give a name.

<button type="submit">Buy <img alt="the plastic duck" src="duck.jpg"></button>

This button will have an accessible name that is the content of the button: the textual title, "Buy" plus the "alt" of the image: "the plastic duck" therefore "Buy the plastic duck".

Associated element #

Moreover, for form elements, the accessible name is the label when it is programmatically associated with the element via the for attribute referencing the id of the field.

 
<label for="search"<Search>/label>
<input id="search" type="text">

With this code, the screen reader will say: "Search edit".

With ARIA too! #

ARIA will be able to help us naming a HTML element, using aria-label and aria-labelledby.

 
<button class="navbar-toggler" type="button" aria-label="Opening menu navigation" ... >
<span class="navbar-toggler-icon"></span>
</button>

This hamburger menu button has a name: "Opening menu navigation".
But we could also use aria-labelledby to reference another element of the page like name:

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

When taking focus on the field, the screen reader announces "Search on the site edit".

More details on "The attributes ARIA that can save you".

Sources #