Accessibility - how to make a button contains only an image accessible?

2187 views html
8

I have an <img> that is when clicked should perform an action, so I wrapped it inside a <button> like this:

<button class="cat">
    <img src="" alt="Cat">
</button>

Regarding accessibility, a button should have role and label. Normally, a button's label is its content inside the opening and closing tags, but in our case there's only an image.
So how to make the button accessible in this case? is the 'alt' attribute enough?

answered question

1 Answer

3

If you want an action to be performed after clicking on the <img>, try to wrap it inside <a></a> tags.

<a href="path to land up on image click">
    <img src="" alt="alt_txt" />
</a>

posted this

Have an answer?

JD

Please login first before posting an answer.