Menu
How do I fix this Lighthouse error:
Buttons do not have an accessible name
<button class="search-button" type="submit" value="Search"></button>
I'm a beginner.
255
Adding Text Content to the Button Element The simplest way to add accessible names to buttons is to add text content to the button element. This displays the text on the button's visible label (and if the button doesn't have a visible label, keep reading).
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.
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.
Short answer. Yes, your button must have so form of text label associated with it.
I would recommend this link for reference.
https://developers.google.com/web/tools/lighthouse/audits/button-name
It suggests that the button should have inner text content or an aria-label or aria-labelledBy.
<button class="search-button" type="submit">Search</button>
<button class="search-button" type="submit" aria-label="search"></button>
I have shown a button with inner text and also a button with an aria-label.
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
