More Crimes Against Hypertext

Back in Crimes Against Hypertext, I identified several common examples of poor hyperlinking. It generated an interesting discussion so I thought I’d write a follow-up, adding a few more examples and some solutions.

The Latest Rogues

The first newcomer to our rogue’s gallery comes courtesy of our language editor, Kelly. She was mystified by the separate linking of multiple adjacent words to the same link target, instead of just joining them together into a single link. She called it The Doppelganger.

The next one came from bel, a commenter who said:

Camouflaged for ambush, this link looks like its going to open another web page but instead is actually going to open up a PDF, DOC, email address, etc. Always when you are in a hurry, quickly scanning around for what you are looking for, you click one of these and then BAMM — you are stuck waiting with your hands tied while it launches your client software. Oh, the howls of chagrin heard from my corner when I’ve stepped on one of these hyperlink land-mines while in a hurry. "Nooooooo! OWWooooooo!!"

I call that one, The Saboteur. Raena, SitePoint’s other technical editor, thought this one should be called The Crying Game. I’ll leave it to you to ponder that one.

Finally, from another commenter, Wynnefield, is the link called The Mime Artist. This is the link that leaves you wanting "More >>":

<p>It's often taken for granted but the lack of good
hypertext makes reading a web page a generally 
unpleasant experience. There are several essential 
hyperlinking techniques you should know.</p>
<p><a href="/">More >></a></p>

The Mime Artist is so named because it vaguely points in a meaningless direction, gives you no clues as to where it’s going, and leaves you wishing you could have your money refunded.

Good Linking Practice

The consensus about good linking practice was that a link should indicate what the user will find when clicking on it. Link text should help the user decide whether or not to follow a link.

Some posters suggested I rewrite the good example to link the intention of the link instead of the name of the target site. So, instead of this:

For excellent examples of finely crafted hypertext
look no further than <a href="http://kottke.org/">
kottke.org, the online home of Jason Kottke</a>.

… I’d rewrite the link like this:

For <a href="http://kottke.org/">excellent examples
of finely crafted hypertext</a> look no further than
kottke.org, the online home of Jason Kottke.

Which makes sense to me.

This is supported by the Web Content Accessibility Guidelines 2.0 , that state the purpose of a link should be able to be determined from its link text alone, or the context in which it is placed. In fact, the guidelines describe a failure of accessibility when:

… links such as "click here" or "more" [that] are used as anchor elements, where you need to have the surrounding text to understand their purpose.

So how do we avoid such accessibility problems?

Solutions

There are many proponents of using the phrase "click here" — the Tautology link — as a call to action so that more readers will click on the link. I understand the need for a call to action, so I’d be likely to investigate alternatives before resorting to "click here." For example, you might see:

To see how you can improve your hypertext
today, <a href="/">click here</a>.

I’d first consider changing the language like so:

<a href="/">See how you can improve your
hypertext today!</a>

But if the client demands the "click here" signpost, I’d suggest:

<a href="/">Click here to see how you can 
improve your hypertext today!</a>

Regarding the Mime Artist link, if you have to implement a link that uses the word "more" as link text, the guidelines also offer a simple solution (this is echoed on the Max Design web site and many others): Use CSS to hide the portion of the link text you want to keep unseen.

Let’s reuse some of the previous markup but add a span that encloses some extra text:

<p>It's often taken for granted but the lack of good
hypertext makes reading a web page a generally 
unpleasant experience. There are several essential 
hyperlinking techniques you should know.</p>
<p><a href="/">More<span> about creating quality
hypertext</span></a></p>

You then use CSS to move the text within the span element off the screen. The two solutions (linked above) use absolute positioning to move the text, but do it slightly differently from each other. They are worth a look.

The result of either solution is to make only the desired link text visible while making available extended link text for screen readers and search engines.