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

How to Code an Accessible Image
by Cas of Brightmeadow

Basic code

Just to remind you what the basic image code looks like:
<img src=”http://www.foo.com/image.jpg” />

The ALT description–how it works

The ALT description works in much the same way that the TITLE attribute works for a link. It is inserted after the URL but before the tag is closed and contains descriptive text. Instead of previewing the image when you mouse over though, the ALT attribute is what is read out when someone is using a screen reader. It should describe the content of the image. It is also the ALT text that is displayed by your browser when, for whatever reason, an image fails to load.

Accessible code

<img src=”http://foo.com/image.jpg” alt=”descriptive text” />

When to use

Use descriptive text in the ALT attribute when the image imparts information to the viewer, for example if it contains text like many header images and buttons do.

When to use a null value

There are certain instances when the image being used imparts no information to the reader – for example a spacer.gif (though the practice of using spacer images is now frowned upon). In these instances, consider using the null attribute to make the screen readers ignore the image. To use the null value, simple use alt="" without a space between the quotation marks. Putting a space, or just ignoring the ALT description will result in non-visual readers being told that there is an image, but not being given a description. Highly frustrating!

A few notes

• The description should not contain the word ‘image’. An image coded as
  <img src=”penguin.jpg” alt=”an image of penguins plotting” />
  will be read out as “IMAGE, an image of penguins plotting” by a screen reader.
  Repetitive. Rather, the text should be something like “penguins plotting another evil plan”.
• Think carefully about when to use the null attribute. Users who can’t see your decorative or blank images don’t need to hear a description of them.

Meanwhile Cas and I are off to plot a plan of our own, until tomorrow.
–ME “Liz” Strauss