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:

• aria-labelledby
• aria-label
• From <label> with for
• title
• placeholder
• aria-placeholder

Example 1

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

Example 2

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

Example 3

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

Example 4

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

Example 5

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

Testing home