Fixing the `Buttons do not have an accessible name` Issue

The Lighthouse diagnostic message Buttons do not have an accessible name indicates that button elements on the page lack an Accessible Name, which assistive technologies like screen readers can recognize. Without a text label, an aria-label, or an aria-labelledby attribute, visually impaired users may not understand the button's purpose.

Situations Where This Issue Occurs and Examples:

1. When a button element has no text content or only uses hidden text.

<button></button>

Adding a clear text label allows screen readers to understand the button's function.

<button>Submit</button>

2. When a button (e.g., icon or image button) displays only visual content without text or accessibility attributes:

<button><i class="icon-close"></i></button>

<button><img src="save-icon.png" /></button>

Adding an aria-label attribute or using an alt attribute (for image buttons) provides a description of the button's function, enabling screen readers to interpret it correctly.

<button aria-label="Close"><i class="icon-close"></i></button>

<button aria-label="Save"><img src="save-icon.png" alt="Save" /></button>