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.

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