Accessibility: using alt tag on image vs aria label on parent button

Question

A functional image would generally be used as a button or link and hence in the markup it would be an img tag wrapped by a button tag or the anchor tag.

Since this image is functional, and assuming there is no accompanying text, we would need to provide a text alternative to the assistive technology. We can do this in many ways, but I am trying to understand if there is any difference (or rather, is either of these methods better than the other) in the following ways:

• adding an alt attribute on the image explaining the functionality
• adding an empty alt on image, but adding an aria-label on the parent button or link to explain the functionality

I have seen a lot of tutorials and examples which talk about adding an alt tag on the image, but couldn't find any which compares these two methods. As per my testing, both work mostly similar with screenreaders.

References: https://www.w3.org/WAI/tutorials/images/functional/

Answer 1

Out of the two options, the alt attribute on the image is, ever so slightly, preferable down to WAI-ARIA support.

But aria-label on a <button> has near perfect support nowadays (assuming you don't need to change the button text dynamically that is) so unless someone is using some ancient (I am talking IE7 era) browser / screen reader combo it should work flawlessly.

Now, with that being said, there is a difference from a maintainability perspective to consider, will developers who are not familiar with accessibility work better with an <img> and an alt attribute or with an aria-label .

Experience says that the aria-label will probably be better here as if a developer swaps out the image they may forget the alt attribute, but they are unlikely to delete the aria-label . However this is a best guess.

There is a third option, which may the best of both worlds (although styling can be slightly more difficult for complex requirements) and has perfect support :

<input type="image" src="image.jpg" alt="this is the alt">

In short, choose whichever one works best for you (unless you need to change the button text in which case almost certainly use the following option).

Secret option number 4

There is a final option, a <button> with an image and text!

So we can position the image over the button text and leave the alt attribute empty on the image.

Then if the image fails to load (or someone blocks images on a slower connection etc.) we should still have a perfectly usable button for everybody!

 button{ position: relative; padding: 0; margin: 0; width: 300px; height: 200px; } button>img{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

 <button> <img src="https://picsum.photos/300/200" alt=""> Button Text </button> <button> <img src="broken source" alt=""> Button Text </button>