Successful Blog

Here is a good place for a call to action.

  • Home
  • Community
  • About
  • Author Guidelines
  • Liz’s Book
  • Stay Tuned

How to Code Accessible Links–Part 3

January 18, 2006 by Liz

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

  • 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

Filed Under: Links, SEO, Successful Blog, Tech/Stats Tagged With: accessibility, bc, blog-promotion, colding-links, personal-branding

How to Code Accessible Links–Part 2

January 17, 2006 by Liz

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

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

Filed Under: Links, SEO, Successful Blog, Tech/Stats Tagged With: accessibility, bc, blog-promotion, colding-links, personal-branding

How to Code Accessible Links–Part 1

January 16, 2006 by Liz

Cas read my article on how to code hyperlinks and in the comments shared some discussion about the importance of accessible links–a topic which had come up earlier in Successful-Blog conversations. In my usual fashion I invited Cas to write on the subject and she took up the challenge. Her response was to do a series of articles on accessible hyperlinks. I, for one, am so glad she did. She really does know so much more about such things than I do. In fact, she knows so much more that I asked her to start by just clarifying for me what is it that makes an Accessible link. –ME “Liz” Strauss

How to Code Accessible Links–Part One: The Basics
by Cas of Brightmeadow

Liz has already written a great article on how to code hyperlinks. I’d like to take this one further and show you how to code accessible hyperlinks. If you are happy with how to manually code hyperlinks, then we can continue. If you aren’t, or feel like you need a bit of a refresher, I do recommend you read the article. We’ll wait.

Ok, ready?

What is an accessible link?

Web accessibility is about making your website accessible to all Internet users (both disabled and non-disabled), regardless of what browsing technology they’re using. An “accessible link” therefore, is simply a link that imparts as much information to as many users as possible. It enables the reader to preview the link, making an informed decision about whether to follow it or not, and helps to differentiate between links that may share link text but refer to different targets

So why should I worry about accessibility?

Not everyone views the Web in the same way that you do – accessibility is not just for disabled users. It is for the many potential readers who might be browsing your site on a dial-up connection, using a screen-reader, using a mobile device with a small screen, or using a text-only browser such as Lynx. By making your website accessible you are opening it up to a much wider potential audience. Making something accessible for humans also has the side effect of making it more accessible for search engines. If you make a living through your site, happy readers, and happy search engines just make good sense.

Not convinced?

Not convinced that this is necessary? Turn off the images in your browser, and then the stylesheet, and see if you can still successfully navigate your website and get meaning from your content. What you see now is roughly how someone with visual impairment, or a text-only browser, views your website.

  • Internet Explorer: Tools > Internet Options > Advanced > Multimedia > Show pictures (uncheck)
  • Firefox: Tools > Options > Web features > Load images (uncheck)
  • Opera: Tools > Preferences > Multimedia > Show no images
  • Stylesheets: View > Page Styles > No style

So how do I go about making my links accessible?

It really isn’t that hard. If you’re already manually coding your links, making them accessible is just a case of putting in a few extra bits of text.
This how-to is in three parts, and will walk you through what you need to know:

  1. How to code an accessible hyperlink
  2. How to code an accessible image
  3. How to code an accessible embedded hyperlink

Throughout this article I will be using http://www.foo.com as an demonstration. Simply replace this, and any other exemplar text with the particulars for what you are doing.

How to code an accessible text hyperlink

Basic code

Just to remind you what the basic hyperlink code looks like:
<a href=”http://www.foo.com”>Descriptive Link Anchor Text </a>

The TITLE description – how it works

It is the TITLE attribute that makes a link accessible. It is inserted after the URL but before the first closing angled bracket and contains descriptive text, enabling the reader to ‘preview’ the link. This in turn allows users to more accurately guess where the link will take them, and make a more informed decision about whether or not they should follow it. Roll your mouse over this example link and you will see what I mean. The text that appears by your mouse cursor is the preview.
Example link

Accessible code

<a href=”http://www.foo.com” title=”Descriptive text” >
Link anchor text will render like this: Link anchor text

When to use

Every hyperlink should have a TITLE attribute.

A few notes

The descriptive title can be any text you want, though to make it as accessible as possible, follow these simple rules:

  • It should say something about the destination of the link.
  • It needs to be between 3 and 80 characters long. A single sentence is normally sufficient.

–Cas and Liz

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

Filed Under: Audience, Links, SEO, Successful Blog, Tech/Stats Tagged With: accessibility, bc, blog-promotion, colding-links, personal-branding

Recently Updated Posts

How to Become a Better Storyteller

SEO and Content Marketing

How to Use Both Content Marketing and SEO to Amplify Your Blog

9 Practical Work-at-Home Ideas For Moms

How to Monetize Your Hobby

How To Get Paid For Sharing Your Travel Stories

7 reasons why visitors leave websites for ever



From Liz Strauss & GeniusShared Press

  • What IS an SOB?!
  • SOB A-Z Directory
  • Letting Liz Be

© 2025 ME Strauss & GeniusShared