Accessible image and icon links

WCAG Section 2.4.4 states: “Whenever possible, provide link text that identifies the purpose of the link without needing additional context”. The most common examples of links that fail this criteria are things like “click here” and “read more”. Many developers have tried to work around this issue by adding title text to their links like so:

<a href="aboutus.htm" title="read more about us">Read More</a>

David Ball wrote an excellent article on the subject which you can find here:

I thought title text improved accessibility. I was wrong.

The jist of it is that adding titles to text links not only doesn’t improve accessibility, it can actually hinder it, because most screenreaders don’t read the titles on text links, or they read both the link text and the title text. The generally accepted solution to this issue is to add hidden offscreen text inside the link. But what about image links like social media, profile icons, etc.? How can you make the purpose of an image link clear to someone who can’t see it?

There’s three ways we can achieve this:

Method 1: Hidden offscreen text, empty alt tag

<a href="http://facebook.com"><img src="facebook-icon.png" alt=""><span class="sr-only">Follow us on Facebook</span></a>

Method 2: Descriptive alt tag on the image

<a href="http://facebook.com"><img src="facebook-icon.png" alt="Follow us on Facebook"></a>

Method 3: Descriptive title text on the link, empty alt tag

<a href="http://facebook.com" title="Follow us on Facebook"><img src="facebook-icon.png" alt=""></a>

Unlike text links, all of these methods work fine with screenreaders and satisfy the WCAG criteria. So which one is best? To answer the question, we put all three to the test using NVDA on Windows (IE and Chrome) and VoiceOver on Mac (Safari). Below is a table showing what each one announced to the screenreader user:

NVDA (IE) NVDA (Chrome) VoiceOver (Safari)
Offscreen text  “Follow us on Facebook link” “Clickable follow us on Facebook link”  “Link follow us on Facebook”
Alt Text “Follow us on Facebook graphic link” “Follow us on Facebook graphic clickable link” “Link image follow us on Facebook”
Title text “Follow us on Facebook link” “Follow us on Facebook link” “Link follow us on Facebook”

As you can see (or hear), method number two announces to the user that the link is an image in all three browsers. That information is completely unnecessary, so we recommend against it.  With the other two methods (hidden text and title text), the results are pretty consistent, and give the user only the amount of information they really need to know. So which one should you use?

Method number three with title text on the link requires the least amount of code, and no CSS. It also displays the title text on hover, which is an additional accessibility benefit for sighted users who may not know what the icon means:

Image showing tooltip text on image

That being the case, we recommend using an empty alt tag and title text on the link.

Note: the latest version of JAWS doesn’t work in a virtual environment, so I wasn’t able to test on it. If anyone out there would like to test these three methods with JAWS and report back, I’ll add them to my results.