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

Selftaught

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.

Toner

Thanks for the info. I edited my post to include a link to something similar. Can you share your thoughts on it? It's an isolated section with a comic image in an anchor and a caption that links to the comic's website. – Selftaught

For that example, I would include a full plain-text description in the alt attribute. If it is an email newsletter that is your best bet. For extra bonus effort (assuming it is not email) you can use an off-screen technique, linked via aria-label or aria-decribedby, and keep the alt simpler. But I am loathe to add ARIA unless necessary. Since the link just brings the user to the main site for the comic, not a specific page, it is fine to leave uncommented. – Toner

Can you expand on "full plain-text description" with an example? Would it be something like my second example? – Selftaught

<img src="comic.png" alt="Single panel cartoon showing an adult and a child lying on a hill looking up at the sky. The child asks “If the cloud ever did go down, would it be called fog?” Comic sourced from CloudTweaks.com, reprinted with permission."> And yes, I looked up "lying" versus "laying," used smart quotes to not interfere with the attribute quotes, and used camel case on the URL as screen readers parse that. That final sentence is at your discretion depending on the nature of the permission. – Toner

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...

Waterbuck

The aria-describedby will not work when the item doing the describing is set to `display:none' as screen readers honor that style and ignore the element. – Toner

@Toner you are wrong. It is important to note that by design, hiding the content (using CSS display:none or visibility:hidden or the HTML hidden attribute) of the element(s) referenced by these attributes does not stop the content from being used to provide the name/description. paciellogroup.com/blog/2015/05/… – Waterbuck

Give this a go in your screen reader of choice and tell me what you get: s.codepen.io/aardrian/debug/NdpMKm – Toner

NVDA: "Comics graphic link If the clouds ever did go down would it be called fog" – Waterbuck

You have to set the focus on the link. It's easier when there's a link before. – Waterbuck

JAWS 17 / IE11 and NVDA 2016.6 / FF 50 do not announce it for me while reading through the content. I only get it if I tab to the element (I updated the pen so it is easier to see). In short, given this experience, if the information is important I would not rely on aria-describedby, especially given all the ways users navigate content. – Toner

I perfectly agree with your above comment : I am loathe to add ARIA unless necessary. This ARIA solution exists, but it is not the perfect solution for the current example (one reason I add the "this may be quite perturbing" warning). This is intended for documentation only. – Waterbuck