Hello Im new web developer. i get empty button error from wave.webaim.org - WCAG 2.0 Level AA Accessibility. Thats the code.

<button type="button" role="presentation" class="owl-prev disabled h-hidden" title="none">

any help on that? Thanks in advance.

CodePudding user response：

"An Empty Button error means that one of the buttons present on the web page is empty or contains no text describing the function of the button. Or, if it’s an image button, the image contained in the button is missing alternative text." Source: https://equalizedigital.com/accessibility-checker/empty-button/

It could be that there's no text on the button. If you don't want to put a visible text on the button, you could put a visually hidden text that is read by screen readers, sometimes called the sr-only class in css. More info: How to hide a text and make it accessible by screen reader?

CodePudding user response：

You need to have actual text inside the button. If you don't want to have a visible text because you style the button in a certain way, using PisteVW solution from above works just fine.

Alternatively, you can use the attribute aria-label="button text here" to give the button a label.

Also, you need to remove role=presentation as the button performs a clear action, it's not there to simply indicate presentational images, for example: https://www.w3.org/TR/wai-aria-1.1/#presentation