No Accessible Names on Buttons

Google Lighthouse flags the button when it does not have an accessible name or aria-label property. Here is an example:

Accessible Names on Buttons

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:

<button>Book room</button>

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