We have a marketplace where we use the 'WCFM - Frontend Manager for WooCommerce' plugin. In order to check the accessibility, I run it on the wave page where it gives me 3 errors.(3 x Empty button) These errors are the following 3 buttons from the colorbox that are used by this plugin:
<button type="button" id="cboxPrevious"></button>
<button type="button" id="cboxNext"></button>
<button type="button" id="cboxSlideshow"></button>
Is there any way I can fix this? I have been looking for it for a long time and it is a project that must be delivered in a few days.
By "empty", the WAVE tool means there isn't an accessible name for your buttons. The accessible name is what is announced by screen readers. Without an accessible name, the screen reader just says "button" and the user won't know what the button is for.
For <button> elements, the accessible name usually comes from the the visible text in the button.
<button>this is my accessible name</button>
But if the button doesn't have text but instead has an image or icon, then that image or icon will either need alternative text or the button will need an alternative label. So you might have something like this:
<button>
<img src='foo.jpg' alt="this is my accessible name">
</button>
<button class='icon' aria-label="this is my accessible name"></button>