How to define an accessible name for a button?
<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.
Free Website Accessibility Audit
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.