<a> where aria-label 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 the <a> element. The priority order from highest to lowest is:

1. If present, use aria-labelledby value.
2. Otherwise, if present, use aria-label value (as per the "Dog" below).
3. Otherise, if present, use link content.
4. Otherwise, if present, use title value.
5. If none of the above are provided, there is no accessible name.

In examples 1 - 3, the title value of "Rabbit" should be announced as a description rather than a name. This is based on the HTML Accessibility API Mappings 1.0 which states that elements should use the aria-describedby attribute for the description if present. If the aria-describedby attribute is not present, the title attribute should be used, as long as this attribute is is not being used as the accessible name.

In example 4, the title value of "Rabbit" should be announced as the accessible name as no other accessible name is provided. As there is no aria-describedby attribute present, the element should not have a description.

This example should not be considered proper practice. Where possible content within the link should be used to define the accessible name.

Example

Code

<a
  href="#"
  aria-label="dog"
  title="rabbit"
>
  Fish
</a>

Assistive technologies

← Return to main list