How to write alt text for linked images
When starting to learn accessibility, we're often told: provide alternative text description for all images.
At some point, we might gather a bit more detail on writing these descriptions. Something like:
"Imagine you were describing the page content to someone over the phone. How would you describe the image in context. What is the content and what is the emotion?"
When the image communicates information that is helpful or relevant for the website visitor, we should follow the preceding advice.
But, when an image is wrapped in a link, we must take a different appproach. We'll look at that now.
Linked or 'functional' images
Images are regularly wrapped with links. For example, this approach is commonly found across the web in the build of 'card' components.
What's important to note is, once the image sits inside a link element it's what's known as a 'functional' image – it can now be interacted with and its primary role has changed from communicating information to transporting people to a new destination.
Important:So, while the aim for static images is to convey the content and emotion within, for functional images we should use the alternative text to describe the link purpose or destination.
Let's imagine we have 2 versions of a card component. In the first, the image is not linked. In the second, it is linked and navigates people to a blog article:
<img src="/lab-photo.jpg" alt="Scientist inspecting a petri dish in a lab setting">
Now the image is linked, the alt text describes the link destination:
<a href="/path-to-scientific-article"> <img src="/lab-photo.jpg" alt="Head to our blog for the June laboratory update"> </a>
To provide a final example. Say we have a linked icon of a phone which takes people to a 'contact us' page. Here is the incorrect and then correct approach to alt text:
<a href="/contact-us"> <img src="/telephone-icon" alt="Phone icon"> </a>
Rather than describing the appearance of the icon, we instead provide a description of the link destination:
<a href="/contact-us"> <img src="/telephone-icon" alt="Visit contact us form"> </a>