« Back to home

Reviewing sources of accessible names

The following are simplified steps that determine how elements aere named. The full details are available via the Accessible Name and Description Computation 1.2

Step 1: If present, use aria-labelledby

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

In this example, the <nav> element is being labelled by the contents of the <h4> element:

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

Step 2: Otherwise, if present, use aria-label

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

In this example, the <button> element has a label of "Close":

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

Step 3: Otherwise, if present, use one of the following:

Name from visible text content

This could be the contents of a heading element:

<h4>About our team</h4>

Or, the contents of a <button> element:

<button>Submit</button>

Or, the content of a <a> element:

<a href="#">Contact us</a>

Name from <label>

The contents of the <label> element can generate an accessible name for the <input>, <textarea>, <meter> and <progress> elements.

In this example, the <input> element has a label via the contents of the <label> element:

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

Name from alt attribute

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

In this example, the <img> element has a label via the alt attribute:

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

Name from <legend>

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

In this example, the <fieldset> element has a label via the contents of the <legend> element:

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

Name from <caption>

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

In this example, the <table> element has a label via the contents of the <caption> element:

<table>
  <caption>Average rainfall in Australia</caption>
</table>

Step 4: Otherwise, and if no other name was found, use title.

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

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

title is only used as the name if nothing else provides one. But if another name source is present, the title content isn’t discarded, it becomes the accessible description instead.

In the following example, "Close" would be announced twice:

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

Step 5: Otherwise, if relevant and present, use placeholder.

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">

placeholder is often announced by screen readers even when a valid accessible name already exists from another source (labelledby, aria-label, or label content).

In testing across multiple screen reader and browser combinations, an input's placeholder text was announced in addition to the correct accessible name in almost every case. This causes verbosity and can confuse users about what the actual field label is.

This is less consistent when the accessible name comes from the title attribute, where the same behaviour was only observed in Safari with VoiceOver.

Step 6: Otherwise, there is no accessible name.

If none of the above apply, the element has no accessible name, and assistive technology users won't know its purpose. Always check that interactive elements have a name from one of the methods above.

« Back to home