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

score 5 · Accepted Answer · answered Jan 18 '17 at 22:40

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.

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. — davidatthepark, Jan 19 '17 at 05:59
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. — aardrian, Jan 19 '17 at 15:10
Can you expand on "full plain-text description" with an example? Would it be something like my second example? — davidatthepark, Jan 19 '17 at 22:17
`` 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. — aardrian, Jan 19 '17 at 22:23

Adam · Answer 2 · 2017-01-20T14:05:18.237

3

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

edited Jan 20 '17 at 14:05

answered Jan 19 '17 at 10:28

Adam

15,932
27
48

1

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. – aardrian Jan 19 '17 at 22:30
@aardrian 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.* https://www.paciellogroup.com/blog/2015/05/short-note-on-aria-labelledby-and-aria-describedby/ – Adam Jan 20 '17 at 10:42
Give this a go in your screen reader of choice and tell me what you get: http://s.codepen.io/aardrian/debug/NdpMKm – aardrian Jan 20 '17 at 13:33
NVDA: *"Comics graphic link If the clouds ever did go down would it be called fog"* – Adam Jan 20 '17 at 14:02
You have to set the focus on the link. It's easier when there's a link before. – Adam Jan 20 '17 at 14:03
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. – aardrian Jan 20 '17 at 14:36
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. – Adam Jan 20 '17 at 15:21

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

2 Answers2