How to Code an Accessible Embedded Hyperlink
by Cas of Brightmeadow

An embedded hyperlink is when the image is the hyperlink. An example of this is the feed button found in the ‘Subscribe’ section of Successful Blog’s sidebar.

These types of links can be problematic if you can’t view the images for whatever reason and you haven’t included ALT and TITLE attributes. To all intents and purposes, these links simply cease to exist. (Both screenshots that follow were trimmed at the top and side for fit).

View this screenshot of Successful Blog’s front page with images turned off,

and compare it to this one with images back on.

The first thing you notice is that in the top image there is no banner, and then that there is no way to subscribe.

Ooops.

Basic code

An embedded hyperlink consists of a hyperlink tag and an image tag:

<a href=”http://www.foo.com/”> <img src=”image.jpg” /> <a href=”http://www.foo.com” title=”description of link destination”> <img src=”image.jpg” alt=”description text” />
Note how the TITLE is attached to the hyperlink, whilst the ALT is attached to the image.

When to use a full ALT description

Use a full ALT description when the image forms the entirety of the hyperlink, i.e., the image is the only anchor text.

When to use a null ALT description

Once again, think carefully about using the null ALT description (<alt=””>) when the hyperlink has a text component. For example:

<a href=”contactus.html” title=”contact page”> <img src=”contact.gif” alt=”contact us” /> Contact us </a></code> will render without images as <contact us contact us>
(The first from the alt attribute, the second from the anchor text).

In this case the image was purely decorative, and would have been better coded as <a href=”contactus.html” title=”contact page”> <img src=”contact.gif” alt=”” /> Contact us </a>.

A few notes

• In this case, the ALT description should reflect the link destination as well as the image description. For example, in the case of a feed button, ALT text such as “feed for Successful Blog” might be be appropriate
• It is also worth bearing in mind that, if you use external hosting for your images (like Flickr and Photobucket), you are at the mercy of their servers. If they go down and you haven’t thought to use ALT or TITLE, you are stuck. If you have made your links and images accessible, then you can keep going that much better till things return to normal,

And that is it. If you are already manually coding your hyperlinks, then making them accessible will just take a few seconds longer. If you aren’t yet manually coding your hypertext links, now is a good time to start. Those extra few moments pay huge dividends in terms of usability, SEO, and the general happiness of your readers. Whilst most of them won’t consciously notice a difference, the few that do will thank you for it, and we as bloggers are nothing without our readers.

If you are interested in learning more about this subject, the W3C has Web Accessibility Guidelines, and Webcredible have some very good white papers describing all aspects of accessibility and usability in more depth.

Sources for this article: The W3C, Webcredible, general common sense, and diverse other sources.

Thanks to Cas for the obvious work this took, and apologies in advance for any errors I might have introduced. We leave you now the links to the series. –ME “Liz” Strauss

The Complete Series
How to Code Accessible Links
This one: How to Code Accessible Links–Part 1
How to Code Accessible Links–Part 2
This one: How to Code Accessible Links–Part 3