How do I make an image within an anchor tag accessible?

Question

Let's say I have an image like the one below.

According to WCAG, this image is functional because it links the user to another page. It seems like I should put the destination of the link in the alt attribute like alt="comic homepage".

Wouldn't someone with a vision impairment also like to know what the image is showing? Would that user appreciate something like alt="comic that links to the cloudtweaks homepage"? The comic doesn't seem to be purely decorative.

<a href="http:////cloudtweaks.com">
  <img src="comic.png" alt=??? />
</a>

This page does something similar (scroll near the bottom of the page).

Answer 1

You have asked this question but not provided enough context. Seeing the surrounding content, the entire page, or the entire site would help.

• Is there surrounding text that explains either the image or where the link goes?

• Will the image appear on the page after the link, perhaps a more full version of the image (as in, all the panels if this image is one of many)?

• Does the site behave similarly to another site or section of this site with which you have confidence users are familiar?

A screen reader is going to announce that it is a link, that it is an image, and then it will announce the image alt text. If you do not feel it necessary to provide some text outside of the image to show users, then you probably do not need to try to force it into the alt text nor into a title attribute (also, do not use a title attribute).

Basically you want to give sighted and non-sighted and low-sighted users the same experience. If you feel it necessary to manage expectations on where the link goes by using the alt then you should just provide it around the link or before the collection of links. Then it helps all users. If you do not think you need to manage the user's expectations, then do not force it on the non-sighted users by jamming extra text down their screen readers.

Answer 2

This situation is documented on the WC3 Website: Image used alone as a linked logo

The WCAG says that you should not describe the image text in this situation but the link function.

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

If you think that the text within the image should be described to screen readers users, you have to change the structure of your HTML, excluding the image from the link, for instance.

<a href="comics.html">Comics</a>
Image of the day:
   <img src="..." alt="If the clouds ever did go down would it be called fog?" />

or adding the description after (note that using aria-describedby the description might be hidden)

<a href="comics.html" aria-describedby="desc"><img src="..." alt="Comics" /></a>
<div id="desc" style="display:none">If the clouds ever did go down would it be called fog</div>

But this may be quite perturbing, I would say...