Warning in LightHouse Accessibility When There’s No Text Inside a Button Tag
Thank you for your continued support.
This article contains advertisements that help fund our operations.
Table Of Contents
This article summarizes the solution for the warning displayed by LightHouse Accessibility when there’s no text inside a button tag.
Displayed Warning:
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.
Here’s how to resolve this.
Cause
The warning occurred when an icon was set inside the button, as shown below:
<button>
<i class="fa-solid fa-heart"></i>
</button>This warning appears when there’s no text inside the button.
Solution
If a button has no text, it’s best to specify an aria-label.
<button aria-label="Like button">
<i class="fa-solid fa-heart"></i>
</button>What is aria-label?
The aria-label attribute defines a string value that labels interactive elements.
In short, if there’s no text inside the button tag, users won’t understand its purpose. By adding an aria-label, we give the button meaning.
Interactive elements are “elements intended for user interaction.”
For example, elements like buttons and links are interactive, as users are expected to interact with them, while static text is not.
Conclusion
That’s all.
It seems similar to using ALT text for images. I’ll be mindful of this when there’s no text inside a button tag.
