<input> where title 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.
  2. Otherwise, if present, use aria-label value.
  3. Otherise, if present, use <label> value.
  4. Otherwise, if present, use title value (as per the "Rabbit" value below).
  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" is announced as a description rather than a name, which is why is announced at the end of each string. In example 4, the title is announced as the accessible name as no other accessible name is provided.

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

<input
  type="text"
  title="rabbit"
  placeholder="fox"
>

Assistive technologies

VoiceOver

NVDA

JAWS

Return to main list