How to make a button containing only an image accessible?

user_7982963 0
Viewed 471

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

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

Regarding accessibility, a button in the accessibility tree should have a role and label associated to it. The role is done using <button> tag and 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?

accessibility image html
1 Answers

Regarding accessibility, a button should have role and label.

You should only provide a role if the default semantics of the element don't give it one. A <button> is a submit button. It doesn't need a role if you are using it for that.

Likewise, a label should only be provided if there isn't an intrinsic one. The content of a <button> labels it, and your <img> element has an alt attribute.

So how to make the button accessible in this case? is the 'alt' attribute enough?

Yes.

Dorward_190680
Related