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:

Lighthouse audit showing buttons do not have an accessible name
Fig. 1 — Buttons do not have an accessible name

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

Last updated: Improve article