January 16, 2006

How to Code Accessible Links–Part 1

ME Liz Strauss wrote this at 6:56 am

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, Guest Writer, Links, SEO, Successful Blog, Tech/Stats |



C'mon. Let's talk!

9 Comments to “How to Code Accessible Links–Part 1”

  1. January 16th, 2006 at 9:58 am
    How to Code Accessible Links–Part One: The Basics at Bright Meadow said

    [...] It gives me great pleasure to announce a mini-series of posts all about accessibility, hyperlinks, and images written by yours truly, and to be found posted over at Successful-Blog. [...]

  2. January 16th, 2006 at 11:48 am
    Gary Miller said

    I try to always remember to use the “Title” attribute when making hyperlinks (not that I don’t misss one here or there). I guess the reason I do is because it drives me nuts when I mouse over a link and don’t get the little preview box. Another thing I add, which will probably be covered in Part 2 or 3, is the URL or other text in the browser’s status bar. It’s just common courtesy to let people know where a link will take them.

  3. January 16th, 2006 at 12:55 pm
    ME Strauss said

    Hi Gary,
    Great to see you! I’ve become addicted to that mouseover box myself. I try to put the location–where the link is going–in the link anchor text, but sometimes that can get really cumbersome so I think Cas has a convert here. :)
    Liz

  4. January 16th, 2006 at 2:02 pm
    Cas said

    Gary, I’m not sure exactly what you mean by text in the browser’s status bar? Do you mean include the full URL in the ‘title’ attribute?

    I do agree that it can’t be stated clearly enough that at least one of the link anchor text or the title attribute should indicate where the link will take you.

    I have started to write my own title attributes as follows:
    title=”Name of Website: name/description of particular page”
    So to link to this article, I would say:
    title=”Successful-Blog: How to Code Accessible Links (part 1)”
    Or words to that affect.

  5. January 18th, 2006 at 7:36 am
    Successful Blog — How to Code Accessible Links–Part 3 said

    [...] How to Code Accessible Links–Part 1 [...]

  6. January 24th, 2006 at 10:18 am
    Some thoughts on Identity at Bright Meadow said

    [...] (I was going to be writing a post inspired by the Brainy Snail all about Archaeology and Web 2.0, but I got sidetracked by identity and accessibility. I’ve dealt with accessibility, so I figure if I deal with identity now, *1* I can move on to Web 2.0/Archaeology after that. Well, that’s my cunning plan anyway). [...]

  7. September 15th, 2006 at 7:04 pm
    Successful Blog - Search Engines & People Care about Anchor Text in Links said

    [...] Readers care about anchor text too. People use anchor text to know where we’re sending them. I know I like more information than a sentence that says the equivalent of Look here. A little descriptive anchor text is worth the trouble to win the confidence of readers. Adding an alternative title that makes links accessible to all readers is also easy and a strong brand builder. [...]

  8. September 15th, 2006 at 7:09 pm
    Successful Blog - How to Code Accessible Links–Part 3 said

    [...] 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 [...]

  9. 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

    [...] 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 [...]

Name (required)

Email (required)

Website

C'mon Let's Talk!