CODEWITHSUNDEEP
htmlimageaccessibility
Moaaz Bhnas
Moaaz Bhnas

Reputation: 1170

How to make a button containing only an image accessible?

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?

Upvotes: 4

Views: 934

Answers (1)

Quentin
Quentin

Reputation: 943142

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.

Upvotes: 3

Related Questions