Liz Strauss at Successful Blog

Thinking, writing, business ideas … You're only a stranger once.

January 18, 2006

How to Code Accessible Links–Part 3

ME Liz Strauss wrote this at 7:36 am

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,

CAS 3 without

and compare it to this one with images back on.
Cas 3 with images

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

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





Filed under Guest Writer, Links, SEO, Successful Blog, Tech/Stats | 3 Comments »




C'mon. Let's talk!

3 Comments to “How to Code Accessible Links–Part 3”

  1. January 19th, 2006 at 2:33 pm
    Cas said

    As always with things I write, I find valuable information as soon as it’s too late to add things. Herein lies the beauty of the comments field!

    Two further articles for your consideration (not written by me sadly, but written by people who say it much better than I ever could):
    Article about SEO and accessibility
    Article on how to make accessible forms

  2. January 19th, 2006 at 4:08 pm
    ME Strauss said

    Hi Cas,
    Sorry this comment got held in moderation. I had meeting to handle before I could get to it. You’re right though that is the beauty of blogs and the comment fields. Nothing has to stay static. We can update when print and websites have to wait. :)

    Liz

  3. August 13th, 2007 at 10:09 am
    Writing Challenge: Joanna’s Thematic Link Post! - Liz Strauss at Successful Blog - Thinking, writing, business ideas . . . You’re only a stranger once. said

    [...] Related A List Becomes 301 Links in Story — Chapter 1. Link Anchor Text: SEO and Relationships How to Code Links for Sidebars and Posts How to Code Accessible Links–Part 1 How to Code Accessible Links–Part 2 How to Code Accessible Links–Part 3 [...]

Name (required)

Email (required)

Website

C'mon Let's Talk!