maxdesign.com.au

Published:

This article explores various methods that can generate accessible names for elements.

Table of contents:

What is an accessible name?

Accessible names are names given to elements in the accessibility tree. They are very important for assistive technology users as they help to identify elements.

Accessible names can be computed from one or more sources and made available in the accessibility tree as a single text string.

So, what are the different methods that can be used to generate an accessible name?

Possible accessible name methods

Method 1: Using the element's content

The contents of many HTML elements, such as the <h4>, <button> and <a> elements below, can generate an accessible name

About our team

Contact us 
<h4>About our team</h4>
<button class="button">Submit</button>
<a href="#">Contact us</a>

Method 2: Using the alt attribute

The contents of the alt attribute can generate an accessible name for the <img> element:

A dummy image 
<img src="a.png" alt="A dummy image">

Method 3: Using the placeholder attribute

The contents of the placeholder attribute can generate an accessible name for the <input> element with a type of text, search, url, tel, email, password, or number. This attribute can also generate an accessible name for the <textarea> element.

<input type="text" placeholder="Search">
<textarea placeholder="Comment"></textarea>

Method 4: Using the title attribute

The contents of the title can generate an accessible name for many elements:

<button title="Close">
</button>

Method 5: Using the aria-label attribute

The contents of the aria-label can generate an accessible name for many elements:

<button aria-label="Close">
</button>

Method 6: Using the aria-placeholder attribute

The contents of the aria-placeholder attribute can generate an accessible name for non-form elements. Unlike the native placeholder attribute, this will not present information on-screen. It will only be available in the accessibility tree:

<div
  contenteditable
  role="textbox"
  aria-placeholder="Add a date"
>
</div>

Method 7: Using the <legend> element

The contents of the <legend> element can generate an accessible name for the <fieldset> element:

Billing information 
<fieldset>
  <legend>Billing information</legend>
</fieldset>

Method 8: Using the <caption> element

The contents of the <caption> element can generate an accessible name for the <table> element:

Average rainfall in Australia
City Rainfall in Janury
Sydney 22 mm 
<table>
  <caption>Average rainfall in Australia</caption>
</table>

Method 9: Using the <label> element

The contents of the <label> element can generate an accessible name for the <input> element if they have matching for and id values:

<label for="name">Full name</label>
<input id="name" type="text">

Or, if the label wraps around the label content and form control:

<label>
  Full name
  <input type="text">
</label>

Method 10: Using the aria-labelledby attribute

The contents of one or more elements can generate an accessible name for another element - if there are matching aria-labelledby and id values:

<nav aria-labelledby="section-heading">
  <h4 id="section-heading">About us section</h4>
</nav>

If more than one element is referenced, their id values are processed in the order they occur within the aria-labelledby value. The accessible name for the button below would be: "Bird Fish Lizard".

Fish

Bird

Lizard

<button aria-labelledby="a1 a2 a3"></button>
<p id="a2">Fish</p>
<p id="a1">Bird</p>
<p id="a3">Lizard</p>

Which accessible name wins?

What happens if multiple names are provided for an element? Which one becomes the text string that defines the accessible name in the accessibility tree?

The two key documents that define accessible names and descriptions are:

Accessible names are defined in the following order:

  1. If present, use aria-labelledby.
  2. Otherwise, if present, use aria-label.
  3. Otherwise, if present, use one of the following:
    • The element's content OR
    • The element's alt OR
    • Content from a related <label>, <legend> or <caption>.
  4. Otherwise, if present, use title.
  5. Otherwise, if relevant and present, use aria-placeholder.
  6. Otherwise, if relevant and present, use placeholder.
  7. Otherwise, there is no accessible name.

Some accessible names action:

No accessible name?

The fifth rule of using ARIA states:

All interactive elements must have an accessible name.

So, in the case of form controls, buttons, links and any non-native interactive elements, we should always provide an accessible name for assistive technologies.

Good and bad accessible names

Always try to use the most semantic method to apply accessible names and avoid ARIA solutions where possible.

For buttons and links, the content should be used for the accessible name where possible. This method provides a matching visible text label and accessible name.

<button>Button text</button>
<a href="#">Link text</a>

For informative images that require a text alternative, use the alt attribute.

<img src="a.png" alt="Alt attribute text">

For form controls that should have a visible text label and an accessible name, a programatically associated label is the best method.

<label for="a">Label text</label>
<input id="a" type="text">

The placeholder attribute

This attribute must not be used as a replacement for labels.

<input type="text" placeholder="Add your name">

The title attribute

This attribute must not be used as a replacement for labels.

<button title="Close">
</button>

The title attribute should only ever be used as an accessible name for <frame> and <iframe> elements.

<iframe title="Our video" src="video.html"></iframe>