[FIXED] How to make a button containing only an image accessible?

Issue

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?

Solution

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.

Answered By - Quentin

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)