Testing the accessible name of an <input>

The purpose this test is to show the cascade order of how accessible names are applied in the accessibility tree. This example should not be considered proper practice. Where possible the contents of the <label> should be used to define the accessible name.

The input element can be given an accessible name using the following methods, in order of priority:

1. aria-labelledby
2. aria-label
3. From <label> with for
4. title
5. placeholder

Example 1

The <input> element should have an accessible name of ‘Cat’ via the aria-labelledby attribute.

<label for="aaa">Fish</label>
<input
  id="aaa"
  aria-labelledby="cat"
  aria-label="Dog"
  title="Rabbit"
  placeholder="Fox"
>
<div class="error-message" id="cat">Cat</div>

Example 2

The <input> element should have an accessible name of ‘Dog’ via the aria-label attribute.

<label for="bbb">Fish</label>
<input
  id="bbb"
  aria-label="Dog"
  title="Rabbit"
  placeholder="Fox"
>

Example 3

The <input> element should have an accessible name of ‘Fish’ via the <label> element.

<label for="ccc">Fish</label>
<input
  id="ccc"
  title="Rabbit" 
  placeholder="Fox"
>

Example 4

The <input> element should have an accessible name of ‘Rabbit’ via the title attribute.

<input title="Rabbit" placeholder="Fox">

Example 5

The <input> element should have an accessible name of ‘Fox’ via the placeholder attribute.

<input placeholder="Fox">

Note

Even though the accessible name is computed as described above, testing shows that most screen reader and browser combinations also announce the placeholder value ("Fox") alongside the correct name. For Examples 1–3.

This extraneous announcement was only observed in Safari with VoiceOver for Example 4.

This is a separate quirk from the accessible name computation itself, testers should expect to hear the placeholder value announced in addition to the stated name in most cases.

Testing home