<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 inputs. 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.

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

Example

Cat

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

VoiceOver

NVDA

JAWS

Return to main list