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
The Lighthouse Accessibility score is a weighted average of all the accessibility audits. See the Lighthouse accessibility scoring post for more information.
How to add accessible names to buttons
For buttons with visible labels,
add text content to the
Make the label a clear call to action.
For buttons without visible labels, like icon buttons,
aria-label attribute to clearly describe the action
to anyone using an assistive technology, for example:
This sample app relies on Google's
Material icon font,
which uses ligatures
to convert the buttons' inner text to icon glyphs.
Assistive technologies will refer to the
rather than the icon glyphs when announcing the buttons.
See also Label buttons and links.
- Source code for Buttons do not have an accessible name audit
- Buttons must have discernible text (Deque University)