<button> with no 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 buttons. 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.
  4. Otherwise, if present, use title value.
  5. If none of the above are provided, there is no accessible name (as per the example below).

In examples 1 - 3, the title value of "Rabbit" is announced as a description rather than a name, which is why is announced at the end of each string. In example 4, the title is announced as the accessible name as no other accessible name is provided.

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




Assistive technologies




Return to main list