Accessible name for buttons

Last updated:

This evaluation is included in the Accessibility audit offered by ExcellentWebCheck. Ensuring website accessibility is essential to ensure everyone can use the internet without barriers.

How to define an accessible name for a button?

The following <button> elements have a valid name that can be announced by screen readers:

<button aria-label="Button name"></button>

<!-- or -->
<button aria-labelledby="name-for-button"></button>
<p id="name-for-button">Name for button</p>

<!-- or -->
<button title="Button name"></button>

<!-- or -->
<button>Button name</button>

Why is this important?

Screen readers announce the button with their accessible name. This way, people who use a screen reader hear the purpose of the button.


This rule fails often because icons are used as button. However, there is no way a screen reader can describe the icon deterministically.

Was this article helpful?
Thanks for your feedback!

We are sorry to hear that you are not satisfied with the content on this page.

Checkout the ExcellentWebCheck services

ExcellentWebCheck's goal is to improve the online user experience. The tools of ExcellentWebCheck help to detect and improve usability problems on your website.