The accessible name in HTML

  • Web
  • Intermediate

Update of the article from

Introduction #

The name of the interface components, also called accessible name, is basically the name that will be exposed to assistive technology AT via the accessibility API. The browser calculates this name 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 focus is placed on that element. The element's role (link, graphic, button, etc.) is then added to define the accessibility name property. The accessible name can be derived from the element's visible or hidden content. Interactive elements or images containing information must have an accessible name. For more details on whether an element should or should not have an accessible name, see the ARIA Authoring Practices Guide (APG). The accessible name allows AT users to understand the function of the control (interactive element); therefore, it must be relevant to its purpose and objective.

To be concise, in HTML Accessibility API Mappings 1.0 - computation method, there is a priority order for calculating the name of a specific HTML element, but roughly:

  1. First, aria-labelledby

  2. Then, aria-label

  3. And finally, the associated elements, for example: tag text for buttons, links, and table cells; label elements for form fields; legend elements for fieldset elements; and caption elements for tables.

Access to the accessible name via the browser #

The easiest way to access the accessible name is to use the browser tools.

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 will find the accessible name of the item being inspected listed as "Name".

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 visible text, will not be accessible, because, of course, there is no accessible name and therefore no information about ​​its function!

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 #