More Crimes Against Hypertext

Tweet

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Paul Watson

    Much as I dislike “the Tautology link” for exactly the reasons you state, studies have shown that it’s more effective – see http://www.pixelshell.com/blog/click-here – and that obviously creates a dilemma.

    Given that – according to that research – more people will click on a link with ‘Call to action’ words, then it makes sense from a business perspective to use ‘call to action’ words such as “click here”.

  • http://manwithnoblog.com tuna

    Don’t get me started on the call for action scenario, where click here has now become an expected action link reenforcing the bad behavior and cementing the bad practice into the accepted experience of the user. I have been fighting this losing battle since 1996. Of course the span work around only works for text, not flash, not images. Just having click here by itself on a page in any form any anytime is bad, bad, bad.

  • Brad Montgomery

    The Saboteur links have forced me to entirely abandon Adobe Reader. On Mac OS I like having PDFs automatically downloaded. If I have to work on windows, I’m sure to use SumatraPDF as my PDF client. It’s fast.

  • http://www.davewarfel.com/blog warfman99

    I agree with everything you’ve said, but if you’re going to write an article about hyperlinks, you should make sure all of yours are correct.

    “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.”

    You missed the first “t” in “the guidelines also offer a simple solution.”

  • MatthewHSE

    Tuna, “click here” is definitely not a case of learned behavior as your comment implies. Basic marketing says to always tell your customer exactly what you want them to do. “Click here” does that beautifully, in a way that nothing else can even come close to.

    It’s a matter of actively suggesting an action, instead of passively making it known that action can be taken. For instance, if you were designing a marketing brochure, you wouldn’t use a statement like XYZ’s phone number is 1-800-123-4567 for your “call to action,” because that’s not a call to action at all. You’d say something like Call 1-800-123-4567 to see how XYZ can help you, which is much more powerful.

    Similarly, you don’t want your webpage to say, This product is available for purchase, as that is completely passive. On the other hand, Click here to buy this product! makes the action easy and specific.

    For a purely informational site, I agree that “meaningful” link text is preferable. But if you’re trying to get a particular response, nothing beats “click here.”

  • Joseph S

    “…while making available extended link text for screen readers and search engines.”

    I don’t think Google wants you to provide different content to their search engine. I think that’s hidden text, and might be bordering on spammy if you get to liberal with it. It’s okay to hide text when that text is also given to users, like image replacement for example. But this just seems a little black hat.

    Why not just give the user the extended link text as well anyway?

  • wscott

    I personally do not have a problem with “Click here” and “More” links. They are easy and do not clutter the interface. Although, I personally prefer the linked heading format which seems to satisfy all of these requirements. The SitePoint home page uses this technique in addition to --ahem-- “Read More…”

  • http://www.tyssendesign.com.au Tyssen

    Of course the span work around only works for text, not flash, not images.

    No, it’ll work for images too. Just follow the image (which has alt text describing the text of the image) and follow that with the hidden span.

    On the other hand, Click here to buy this product! makes the action easy and specific.

    And Buy this product now! is even more specific and direct without the need for the click here. ;) Seriously, I’ve come across very few ‘click here’ examples that couldn’t have been done better if the copy had just been reworded a bit, e.g.:

    Click here for free access – OK
    Get free access now – better

    Click here to learn more about… – OK
    Learn more about… – better

  • http://www.sitepoint.com/articlelist/487/ Andrew Tetlaw

    @warfman99 thanks for the heads-up, I’ve fixed it.

  • http://www.sitepoint.com/articlelist/487/ Andrew Tetlaw

    I’m with @Tyssen, there are so many options other than ‘click here’.

    Everyone seems to be referring to that one study as if it’s conclusive. I highly doubt that.

  • http://www.heyraena.com raena

    In SitePoint’s war on hyperlink crime, the worst criminal offenders are pursued by the detectives of the Tech Times. These are their stories. *doink doink*

    @MatthewHSE,

    Similarly, you don’t want your webpage to say, This product is available for purchase, as that is completely passive. On the other hand, Click here to buy this product! makes the action easy and specific.

    I totally agree that a call to action link should be an imperative. But an instruction like “Buy now” or “Reply to this comment” or “Check this out!” are all nice active ways to say this without the redundant “Click Here To…”, in my view.

    I think it’s fair to say that most people know that text that is coloured and most likely underlined is a link. In your house, would you have a label above every doorhandle that says ‘Turn the handle?’

  • arts-multimedia

    I agree with MatthewHSE saying that from a marketing standpoint “Click here” is a sound practice. It’s not informative, but then, it doesn’t have to.

    I have been writing meaningfull links for quite some time now, but it often breaks the natural flow of the article and after reading this article, I actually do not want to do that anymore.
    Everybody reading blogs knows that excerpts of articles are followed by “Read more” or something similar. Why should we then elaborate on such a link if we know where it goes to?
    If you really think about it, all this advice on how to elaborate links into something meaningful is actually utter nonsense.
    After all: Do we write on every corner of a book what there is to read on the next page? Do we complain when a folder doesn’t say upfront what is on the back?
    Let’s show some respect and treat visitors as grown-ups. And yes, we have to keep the impaired visitor in mind, but I don’t think we should pat them on the head like little children.

  • http://www.headbank.co.uk/ headbank

    Offtopic, but the Mime Artist example contains a schoolboy markup error! To wit:

    <a href="/">More >></a>

    Shouldn’t that be:

    <a href="/">More &gt;&gt;</a>

    Unescaped entities in your text? Tsk tsk!

  • Stevie D

    Tuna, “click here” is definitely not a case of learned behavior as your comment implies. Basic marketing says to always tell your customer exactly what you want them to do. “Click here” does that beautifully, in a way that nothing else can even come close to.

    It’s a matter of actively suggesting an action, instead of passively making it known that action can be taken. For instance, if you were designing a marketing brochure, you wouldn’t use a statement like XYZ’s phone number is 1-800-123-4567 for your “call to action,” because that’s not a call to action at all. You’d say something like Call 1-800-123-4567 to see how XYZ can help you, which is much more powerful.

    You can have a perfectly good call to action without using the dreaded words “click here”!

    “Buy it now!” on a clearly marked link or button makes it pretty clear what the link/button does, and is more succinct than “Click here to buy it now”, so a better call to action. “Subscribe to our newsletter” on a clearly marked link is no less obvious than “Click here to subscribe to our newsletter”.

    People don’t need to be patronised by being told to click on a link.

    I’m not at all convinced by the Pixelshell study, it takes a very narrow selection of links, and in one specific context. I would like to see a much more scientific study pitting “click here…” links against simple call-to-action links before I would even consider adding those evil words to my sacred webspace.

  • whatispunk

    @arts-multimedia: But what if the page you are reading contains several links throughout that say “more” or “click here”? When you are reading the article from top to bottom you will know what each link is related to, but how many people read a page from start to finish?

    As I’m sure we’re all aware, most users will scan a page for what they need rather than reading it in its entirety. “more” and “click here” links in no way aid the scanning reader.

    What about times when you read the entire page but skip the links with the intention of going back and clicking them when you’re done? Then you’ll have to read a bit of each preceding paragraph to rediscover the context of the link.

    To continue the doorknob analogy… You may know that turning the knob will open the door, but without proper signage you may wind up in the ladies’ room.

  • arts-multimedia

    whatispunk: First of all, we presume that we do not stuff articles full with links saying Click here or Read more. Usually, you place thpose a

  • arts-multimedia

    whatispunk: First of all, we presume that we do not stuff articles full with links saying Click here or Read more. Usually, you place those at the end of an excerpt or an ad.
    I’m not talking about cases where content providers do not know what they are doing.

  • http://www.sitepoint.com/ mmj

    @headbank

    Shouldn’t that be:

    <a href=”/”>More &gt;&gt;</a>

    Unescaped entities in your text? Tsk tsk!

    The > character does not need to be escaped in HTML, only the < and &. In XML, > needs to be escaped only when it is preceded by ]].

  • http://www.sitepoint.com/articlelist/487/ Andrew Tetlaw

    The funny thing about the &gt;&gt; is that I did do exactly that in the code sample source (just view it and see). I just forgot to double escape the ampersands for the code listing.

    So, nhaaaaa…

  • Andrew Grabham

    For text readers etc, and giving max information with your “click here” links, what about using the title=”More Information available on Subject” within the anchor?

    Or am I missing the point of this discussion?

    Andrew

  • Anonymous

    I agree about the ubiquitous “Click here”! I spend a lot of time persuading clients not to use it.

    For one thing, not everybody “clicks”. Some people “tap”, some people use their voice, some people use devices other than a mouse, which is what “click” implies the user has.

    I often wonder what some people with disabilities feel when they are confronted with “click here” and they can’t!

  • glenngould

    I have a book review site in which some reviews are too long to show all content in the review listings. So I use,

    if it’s a short review:

    <p>review text</p>
    <p><a href=”/”>Link</a></p>

    if it’s a long one:

    <p>review text</p>
    <p><a href=”/”>Continues…</a></p>

    How do you find this approach?

  • http://www.sitepoint.com/articlelist/487/ Andrew Tetlaw

    @Andrew Grabham, you just can’t rely on the title attribute to provide the much-needed context information for your links.

    @glenngould, well I think ‘Continues…’ is no better than ‘More >>’.

  • glenngould

    @Andrew Tetlaw, if I don’t mis-remember I’ve seen similar texting a lot in printed magazines, newspapers. Do you find it improper for those too if it’s true?

  • http://www.sitepoint.com/articlelist/487/ Andrew Tetlaw

    @glenngould, I would if the text wasn’t continued on the very next page! But generally no I don’t mind it in printed media. But a web page is a totally different bucket of kittens.

  • glenngould

    @Andrew Tetlaw, Ok thanks for the answer. What would you suggest for such anchor text in a review listing; Something like “read (the rest of the || full) review”?

    http://themuseumofinnocence.com/ is the site btw.

    Thanks.

  • http://www.sitepoint.com/articlelist/487/ Andrew Tetlaw

    @glenngould, that’s a good start, but I’d add the reviewer’s name to the link too. “Read the full review by Bela”, “Read Bela’s review”, “Continue reading Bela’s review” for example

    Also you could get rid of the ‘link’ text links entirely if you linked the review date & name instead. That could possibly be changed to “Reviewed by Bela on Sep 08 2008″.

    The other thing to consider is, if you wanted to keep the narrow column layout, to use the hidden text technique mentioned in the post.

  • glenngould

    @Andrew Tetlaw, I actually like your suggestions (apart from hiding text). Still ‘Continues…’ feels so ‘natural’ and un-cluttered to me; implying just about the same thing with fewer -meaningful- words. I’ll re-consider though.

    Thanks.

  • ZZMike

    I’ll agree that “Click here” has seen better days, and is usually the mark of a novice page-writer.

    On the other hand, your suggestion that “a link should indicate what the user will find when clicking on it” can easily lead to entire sentences that are hyperlinked. That gets to be a distraction. Novice writers are likely to err in this direction.

    It also assumes that the reader hasn’t read the surrounding text. The “kottke” example is a good one. Based on the surrounding sentence, I doubt anyone would wonder where the “kottke” link led.

    Obviously, “More>>” is a bit cryptic, but many bloggers save screen space with a “Read more” link after the first paragraph or two, and hardly anybody gets confused.

    As for links taking you to a pdf without warning, people who do that should have their HTML licenses suspended until they take a remedial Web design course.

    I really like MatthewHSE’s comment. It depends on who your audience is. If they can be expected to be novice computer-users, “click here” is exactly what’s needed. If they’re developers, …..

    Anonymous: “For one thing, not everybody “clicks”. Some people “tap”, some people use their voice, …”

    Good point. Let’s use “Select this hyperlink”.

  • http://www.sitepoint.com/articlelist/487/ Andrew Tetlaw

    @ZZMike, remember we’re not only worried about usability, but also accessibility. The Mime Artist style link might be usable for a certain class of user, but their accessibility has much room for improvement.