The accessible name in HTML
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
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.
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.
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
<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".
- Accessible Name and Description Computation 1.1 by the Accessible Rich Internet Applications Working Group
- Demystifying Accessible Name by Joe Watkins
- What is an accessible name? by Léonie Watson