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.