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:
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/
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).
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>