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

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

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:

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")