Google Lighthouse flags the
button when it does not have an accessible name or
aria-label property. Here is an example:
How to pass the accessible button names audit – Adding necessary names
See the HTML source first to have buttons with the visible tag. It is extremely important to check the
button elements one by one in the HTML source. You need to add a text for each
button element in the HTML source. Don’t forget to use call-to-action language. In cases where plain text needs to be written, you can of course use simpler words, phrases, or instructions. Be careful to have text on each of the
buttons. See the example:
You can also use an
aria-label attribute for
buttons that have visible elements such as icon buttons. In this way, you will clearly explain the functions of these buttons to screen readers and other assistive technologies.
The appearance of the functions of the buttons will be extremely beneficial for scenarios where the button appears only as of the name because web loading is not performed correctly. In that scenario, the user has a chance to have information about the function and purpose of the button even with a broken page view.
Test Your Website Issues
You can quickly analyze your site