<button> where aria-labelledby 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 (as per the "Cat" value below).
  2. Otherwise, if present, use aria-label value.
  3. Otherise, if present, use <button> 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 <button> should be used to define the accessible name.

Example

Cat

Code

<button
  aria-labelledby="cat"
  aria-label="dog"
  title="rabbit"
>
  Fish
</button>
<div id="cat">
  Cat
</div>

Assistive technologies

VoiceOver

NVDA

JAWS

← Return to main list