What should the ALT text be for an image that is also a link?

Question

An image alt="" text should contain information about that image in the context of the page, so for instance if you have an article about cats on skateboards and then a photograph of the cat on his skateboard you'd probably give it the alt text of alt="Fluffy pulling some mad tricks on his pimped-out board".

^{download bmml source – Wireframes created with Balsamiq Mockups}

However, what should happen when that image is a link to a page (such as the Wikipedia cat page)?

I don't think there is any point using the title attribute here because screenreaders just ignore that when an alt attribute exists - the only people who would see the title attribute are mouse users who hover over the image, so that excludes keyboard only users too. It's not really any benefit to accessibility to include a title in this situation (Overall the title attribute is a bit useless really).

So, what should the image ALT text say in this case?

WCAG Guideline 1.1 states:

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Therefore giving it the alt text of cat article page on Wikipedia is incorrect because that doesn't describe the image, neither does skateboarding cat image that links to the wikipedia article because the alt text should refer to the image itself, not the link associated with it.

Answer 1

HTML5 (Candidate Recommendation) contains the section "Requirements for providing text to act as an alternative for images", which includes the case "A link or button containing nothing but an image":

When an a element that is a hyperlink, or a button element, has no text content but contains one or more images, include text in the alt attribute(s) that together convey the purpose of the link or button.

(HTML5: Techniques for providing useful text alternatives (Working Draft) has almost the same text.)

So the alt content should not describe the image, but the target of the link.

Techniques for WCAG 2.0 (Working Draft) contains the technique "H30: Providing link text that describes the purpose of a link for anchor elements":

When an image is the only content of a link, the text alternative for the image describes the unique function of the link.

So this particular technique (which is informative, not normative!) agrees.

---

IMHO this makes sense in many (most?) cases (e.g., for the examples given in the HTML5 spec), but I think there are cases where this requirement would lead to a bad user experience.

For example, a blog post which contains an image only. This image is linked to a high-res version of it. The link opens the image file directly, no HTML page involved:

<a href="mona-lisa_high-res.jpg">
  <img src="mona-lisa_medium.jpg" alt="…" />
</a>

Following the HTML5 requirement, the alt content could be something like

High resolution JPG of "Mona Lisa"

But now the actual content of the image is never given in text form, as the img element would have to contain the alternative text describing the target of the link, which would be the same image in higher resolution. But this high-res image can’t contain an alternative text, as it’s not part of a HTML document.

So I guess we should take care when adding image-only links: if the alternative text of an image would be different when linked vs. unlinked, we should make sure that the target of the link describes the image. If not (e.g., for direct file links), we would have to change the setup, for example:

• don’t link to the image directly, instead link to a HTML page which contains this image
• don’t link the image itself, instead add a separate text link
• don’t include only the image in the link, instead add some descriptive text to it (so it’s no longer containing "nothing but an image")

Answer 2

To restate the problem you're trying to solve: you want a user who has a screen-reader (or another kind of browser that lacks images) to be able to tell where the link goes. I think that you've forgotten that you're actually trying to solve a bigger problem: you want all your users to be able to tell where your link is going.

Normally, you achieve this by making the link body describe the target of the link: I wrote a previous article on this subject. BBC News wrote about it. Click here for a picture of me shaking hands with the Queen. Notice that I said, "link body," not, "link text." When the link is an image, it too must do the job of telling the user what to expect.

In your example, it's clear from a picture of Fluffy that the link will go to more info about him, but it's not clear that it will go to Wikipedia.

If your link body is an image, and it's clear from the image where the link goes, and the alt text describes the image, then it must be clear from the alt text too. The alt text doesn't have to do anything extra to describe where the link goes. On the other hand, if your link body is an image, and it's not clear where the link goes to, then you should add a caption even for the users who will see the image.

In your example, you might have Fluffy skateboarding, and include the text, "Fluffy is featured on Wikipedia," as a caption inside the link body. If you do this, then your alt text still doesn't have to do anything extra, because all users will see the caption.

If, for whatever reason, you don't want to make the link target clear to users who can see images - maybe you're afraid the descriptive text will clutter the page, and prettiness is more important to you than usability - you might be tempted to use the a tag's title attribute (not the img tag's) to add extra information. Don't bother, as this is not useful for screen-readers. This article shows you how it fails (this one's a genuine link), and describes an awful workaround that uses CSS to show extra text to a screen-reader or other text browser, but hide it from a graphical browser. Bleurgh. But the point is, if you use this technique, you still don't need to change the alt text because it's a link: your alt text describes the image, and your hidden caption describes where the link goes.

In summary, this question is just a special case of the question, "How do I let my users know where an image links to?" By thinking about the user's perspective from navigation, we've come up with three ways to do this, in order of preference:-

1. Choose an image that makes it obvious, and then use the alt text to describe the image.
2. If you can't make it obvious from the image, add (inside the link body) a caption that makes the relationship clear between the image and the link, and use the alt text to describe the image.
3. If layout constraints stop you adding a caption, add an invisible caption describing the link just for text browsers & screen-readers, and use the alt text to describe the image.

Whichever alternative you take, the answer to your literal question is the same: the alt text should always describe or represent the image.

If you like, this hierarchy is a parallel to designing a button in a GUI: the best option is to make it obvious what the button does; then you consider adding a tooltip; and as a last resort you explain it in the help file or manual.

So, to sum up for your example, we start by thinking about how to make a Wikipedia article obvious to the user. It's completely non-obvious that your photo of Fluffy would link to Wikipedia, even if the Wikipedia page uses the same photo. So don't make the photo link to Wikipedia. Have a link to Wikipedia elsewhere, using a Wikipedia icon (and the alt text "Wikipedia"), or maybe a screenshot of the Fluffy photo in context on the page (and the alt text "Fluffy is featured in the Wikipedia article on cats" or similar). This way, you don't need to resort to having a visible or invisible descriptive caption, and you've made the user experience nicer for all your users, not just those on screen-readers. You can still include the Fluffy photo if you like, but it doesn't have to be a link at all.

Answer 3

Does the image actually provide any additional (valuable) information that is not already available in the surrounding text? In the example in the question, the text surrounding the image describes how the cat loves to pull tricks on his skateboard. I don't think the accompanying image needs another, almost identical description. It's redundant.

When WCAG talks about the need to provide a text alternative that describes the image, it really means provide a text alternative that serves the same purpose as the image. I think the primary purpose of the image in this context is to act as a link so I'd use the alt attribute to describe the target of the link, not the content of the image.