When a button doesn't have an accessible name, screen readers and other assistive technologies announce it as button, which provides no information to users about what the button does.
How the Lighthouse button name audit fails #
Lighthouse flags buttons that don't have text content or an
How to add accessible names to buttons #
For buttons with visible labels, add text content to the
button element. Make the label a clear call to action. For example:
For buttons without visible labels, like icon buttons, use the
aria-label attribute to clearly describe the action to anyone using an assistive technology, for example:
See also Label buttons and links.
- Source code for Buttons do not have an accessible name audit
- Buttons must have discernible text (Deque University)