Think Before You Link

|

This tip has moved to its new home:

Stop Mystery Meat Linkification

What does "Think before you link" mean? I first saw the phrase in a post called Click Here and other meaningless link phrases by Roger Johansson, a Swedish web developer. In the previous tip here on All Access Blogging, we discussed how to use color and decoration to help your sighted visitors distinguish your links from your text. Johansson's post, and this tip, address another part of the equation - the text you choose as your link.

Have you ever clicked on a link and it did something you didn't expect? A pop-up window, sounds, a change in the size of your browser window? If you don't think before you link, you could be creating similarly annoying experiences for readers with disabilities. We're going to save the debate about links launching new windows for another tip, but today let's take a look at link text and how it can make your blog more accessible.

What do I need to know?

What's the difference between the following sentences?

I love this blog about vegan cooking.

I've seen several articles about this.

In the first example, the link text itself tells you exactly what it links to: a blog about vegan cooking. In the second, it's not so clear.

Why does this matter?

Sighted users tend to scan a web page with their eyes, identifying navigation, headings, and links. This gives them a quick idea of what's on the page. A rough equivalent for many people with disabilities who use screen reader software is to extract a list of links from a web page or tab through the links to get a sense of what's on the page - or to find a specific link that they already know is there. To a visitor who is scanning this way, text like "click here" is just not that informative. Neither is "about" or "this" from the second example above.

Using links this way is no substitute for actually reading the text, of course. It's just another tool that makes it easier for people who can't visually scan the page. Given that the tool exists, your choice of link text can make your blog a little more user-friendly.

Here's another scenario. What if the visitor is using a screen reader, reading your full post, and comes to a sentence like this?

This website has a perfect lemonade recipe for summer.

At the end of the sentence, the visitor realizes that the link at the beginning was probably a link to the recipe, which sounds great - but now they have to back up to go to the link. Most people who use this software are pretty quick when navigating pages, but why cause them extra work?

Here's something else to consider:

I love this.

When the words you use as links are really small, it can be hard for users with mobility impairments (or anyone else) to click on the links.

Another issue arises when you link anything other than a web page:

These research findings about social promotion in schools are really interesting.

This time the link text is great. We know the link is to research findings about child abuse. But what's this? It opens a PDF. How was the reader to know? PDFs, Quicktime movies, mp3 song files, YouTube clips, links that go directly to photographs, and other links to non-web page content are friendlier when they're clearly labeled so that people with disabilities (or just really bad internet connections) can decide whether they want that content before they click.

In general, it takes a little more work for users with some disabilities to open a new link or back out of an unwanted page. It helps them to know if it's really something they're interested in before they go to that effort.

Finally, here's something that I just can't think of a good reason to do, but I see it every once in a while:

Check out http://www.problogger.net/archives/2007/06/22/goals-to-achieve-in-a-blogs-launch-phase/ for good advice on what to achieve when you first start your blog.

How long could you sit still if someone tried to read that URL to you aloud, one character at a time?

Are there any other benefits to writing better link text?

Search engines pay attention to links on a page when trying to figure out what the page is about. The more your link text accurately describes what you're linking to, the better search engines are going to understand what your blog is about.

How do I write good link text?

Screen readers indicate that text is a link, usually by saying the work link or by changing the voice or pitch. So you don't have to worry about including the word link.

Web Access Centre provides this piece of advice, and I couldn't put it any better:

Identical links should lead to identical pages. Similarly, once you've decided on the perfect phrase to use as link text, use the same words, if possible, when the link appears more than once on the same page; as some people find it confusing to follow different text links, only to find themselves returned to a page they've already read.

You may not be able to achieve this ideal completely, especially on a blog where there are often repeating links like "comment" and "permalink." However, you can start small by trying to avoid creating several links in one post that all go to the same thing, or if you must, don't use different link text each time.

If you have two adjacent links, they need to be separated by some sort of punctuation to make sure the screen reader leaves a pause between the links. That means making sure that the comma, period, or other punctuation is outside of the link if there's another link right after it.

If you're linking to a blog's or website's home page, use its name as your link text. Boing Boing is very high traffic. Treehugger is probably the biggest green blog. Whip-Up has so many craft ideas, I don't know where to start. CNN has a lot more video these days. The Social Security Administration has details about Medicare Part D low-income subsidies.

If you're linking to a specific post on a blog or a specific article on a website, be more specific than just the blog's title. But Can Your Poodle Take a Memo? on BlogHer highlights the upcoming Take Your Dog To Work Day. Indexed has a great diagram of the difference between status and money. This CNN article on the shuttle mission is a little light on details.

If you're linking to something that is not a web page, include that information or at least give a hint in your link text: Here's a PDF booklet of information about snacking. This song is one of my favorite things. Here's the high-resolution Resident Evil: Extinction movie trailer. If you haven't seen the YouTube video about Craig Ferguson trying to get honorary citizenship in Texas, check it out now!

I'd like to help, but won't this make all my link text really boring?

Not at all. One of my favorite linkers is shannon, who blogs at Egotistical Whining. Here are a few of my favorite links from her blog, with the link text she chose:

These links are far from boring, because shannon has used link text to describe the content exactly as she sees it. You don't have to check your personality at the door.

Sometimes it's fun to do a link like How Beautiful! or What a Jackass! and create a little mystery for your readers. Just don't overdo it.

This seems like a lot to remember. What if I don't do this perfectly 100% of the time?

No one expects you to. The more you can do, the better. For me, it was a little harder to do this when I first started, but once I got in the habit it was no big deal.

Questions? Feedback?

Please comment or send me an email. If you disagree or if I need to correct a mistake, or if there's a way I can improve this article, I'd like to know. Thanks!

Further Reading

Want another take on all this? Try these sources:

Other Sources

I'm Geeking Out at BlogHer 08
Powered by Movable Type 4.1

Archives