Ensure buttons have discernible text

When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers. Lighthouse reports when any buttons do not have accessible names:

How to fix this problem #

To fix this problem, provide inner text for each button element that is discernible to screen reader users (see also Label buttons and links). For example, create clear calls to action:

<button>Book Room</button>

When working with icon buttons, use the aria-label attribute to clearly describe the action to anyone using a screen reader, for example:

<button aria-label="Bold text icon"></button>

Learn more in Buttons must have discernible text.

More information #

• Ensure buttons have accessible name audit source
• axe-core rule descriptions