<input> where aria-labelledby should be accessible name

← Return to main list

The purpose this test is to show the cascade order of how accessible names are applied in the accessibility tree for the <input> element. The priority order from highest to lowest is:

1. If present, use aria-labelledby value (as per the "Cat" value below).
2. Otherwise, if present, use aria-label value.
3. Otherise, if present, use <label> value.
4. Otherwise, if present, use title value.
5. Otherwise, if present, use placeholder value.
6. If none of the above are provided, there is no accessible name.

In examples 1 - 3, the title value of "Rabbit" should be announced as a description rather than a name. This is based on the HTML Accessibility API Mappings 1.0 which states that elements should use the aria-describedby attribute for the description if present. If the aria-describedby attribute is not present, the title attribute should be used, as long as this attribute is is not being used as the accessible name.

In example 4, the title value of "Rabbit" should be announced as the accessible name as no other accessible name is provided. As there is no aria-describedby attribute present, the element should not have a description.

In examples 1-4, the placeholder value of "Fox" is incorrectly announced across multiple screen reader / browser combinations.

This example should not be considered proper practice. Where possible the contents of the <label> should be used to define the accessible name.

Example

Code

<label for="fish">Fish</label>
<input
  type="text"
  id="fish"
  aria-labelledby="cat"
  aria-label="dog"
  title="rabbit"
  placeholder="fox"
>
<div id="cat">
  Cat
</div>

Assistive technologies

← Return to main list