<input> where aria-describedby should be accessible name

← Return to main list

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

1. If present, use aria-describedby value (as per the "Cat" example below).
2. Otherwise, if present, use title value.
3. If none of the above are provided, there is no accessible description.

This example should not be considered proper practice, and is for testing purposes only.

Example

Code

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

Assistive technologies

← Return to main list