<button> where content 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 <button> element. 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 <button> content (as per the "Fish" example below).
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.

Example

Code

<button title="rabbit">
  Fish
</button>

Assistive technologies

← Return to main list