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/