Writing Alt Text for Hyperlinked Images

Some web accessibility issues are fairly easy to fix. Image alternative text (also called alt text) certainly falls into this category: By taking a few seconds to write alt text, you can ensure that your non-text content is accessible for people who use assistive technologies. 

But while the best practices of writing alt text are fairly straightforward, they’re somewhat subjective. Your goal is to describe each image concisely and accurately — and it’s up to you to decide what “concise" and “accurate" really mean. 

This can be especially difficult when you’re writing alt text for hyperlinked images. You want to describe the visual content, but you also need to describe what happens when the user clicks on the link. Your description needs to be fairly short. How do you balance all of those goals? 

Hyperlinked images are interactive elements, first and foremost

Before worrying about the visual content, think about the hyperlink. Linked images are important elements because they serve a function, and your alt text should explain that functionality as succinctly as possible.

Some general tips to keep in mind:

• Explain what will happen when the link is activated. 
• Don’t use the words “click to" or “link to.” Screen readers (software that outputs text as audio) will automatically identify the link as clickable. 
• If the image contains text, that text can often serve as alt text. For example, if an image of a painting has the text “gallery,” the word “gallery" is probably enough context for screen reader users. 
• If the image adds additional context that wouldn’t be available with a standard hyperlink, make sure to include that context. 
• If the image alt text is identical to a nearby text link, wrap both in the same a href tag and use null alt text to prevent a redundant hyperlink. Learn more about null alt text.

When reviewing your alt text, ask yourself: If I couldn’t perceive the content visually, would the alt text provide everything I need to know? If so, you’re on the right track.

Related: Don't Write Alt Text for SEO — Write for Real Users

Keep alt text concise, even if the image is complex

Too much alt text can be as harmful to the user experience as missing alt text. While there’s no limit to the amount of info you can include in the img alt attribute, you should try to keep descriptions fairly simple — otherwise, your users will need to listen to the entire description in order to decide whether they want to activate the link.

For example, let’s say you’ve written the following alt text for a hyperlinked image that points towards a restaurant’s ordering portal: 

alt=”A latte with a heart sits on the side of a table next to an avocado sandwich. Visit our ordering portal to place a pickup or delivery order.”

Better alt text might simply read:

alt=”order food.”

Here, we’re not describing the latte or the sandwich — because the presence of the food isn’t really that important. It might be enticing for visual users, but the really important thing is the link to the ordering portal. 

By keeping the alt text simple, we’re providing a better experience for non-visual users. They don’t need to listen to two sentences of content before ordering their food (which might include a latte and an avocado sandwich). 

When you approach accessibility issues with an inclusive mindset, it’s much easier to avoid mistakes. More importantly, the right mindset will help you provide a truly inclusive experience. For more best practices, download our free eBook: Developing the Accessibility Mindset.