Blog:

In a world of social participation, AJAX and rich user experience, the humble hypertext link can seem so web 1.0. However, this often-neglected tag is the fundamental building block of every web application and is in the front line for usability. This article seeks to re-evaluate its role and suggest some best practice for its use.

Let’s be honest, the hypertext link isn’t very sexy. Familiarity breeds contempt the saying goes and this is certainly true for the ‘a’ tag. Every day we code it many times over without giving it a second thought. Unfortunately, as web designers we can often become sloppy when working with links and start to take liberties with the way we implement them. Not only is it incredibly common, it is also very simple: after all, its just a link. And at the other end of the scale you can find all manner of creatively styled solutions.

So in order to redress the balance I will endeavour to lay out some good practice here.

Make it descriptive

The content of a link should always clearly describe where the link goes. Simple stuff I know, however its amazing how often this most basic of principles is ignored. How many times do we see links with labels such as click here and more?

The enlightened will know that links like this create accessibility problems when read out of context by assertive technologies. In fact there is a W3C accessibility guideline that specifically addresses this issue (checkpoint 13.1):

Clearly identify the target of each link

However, instead of addressing the problem properly, some people simply add an additional title attribute to the existing links in the belief that this satisfies the guideline. In fact the W3C recommendations go on to say:

In addition to clear link text, content developers may further clarify the target of a link with an informative link title

In other words, the title attribute is a useful addition to a clearly labelled link, but not a replacement.

The problem isnt merely an accessibility issue. There are also significant usability concerns. We all know that users dont read websites, they scan them. When users are scanning a page they look for things like headings, lists and more often than not, links. Because the reader is scanning the page they often do not read the text surrounding a link and so (once again) the link needs to make sense out of context. The user is not going to hover over each link to see what the title attribute says!

Of course, as with everything, we need to be pragmatic about how we implement this. Sometimes it would be necessary to turn several sentences into a link in order to make it truly descriptive. In such cases I would encourage some common sense and good use of the title attribute instead. However the general principle stands; wherever possible make your links descriptive.

Keep users informed

Not only should a link describe its destination, it should also inform the user about any unusual behaviour. Probably the most obvious example is that it is important to inform the user when spawning a new window. This ensures you conform to checkpoint 10.1:

Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user.

However, there are other occasions where the user requires additional information. For example, if a link goes to a file that is not a standards HTML page (such as a PDF, MP3 etc) then it is important to inform the user of this. Additional information such as the type of file, its size and what information it contains helps the user make a decision on whether they should follow the link or not.

How this information is displayed needs to be decided on a site-by-site basis. However, a typical approach might consist of adding the information as a title attribute or including it after the main link text within brackets.

Leave the underline alone!

Links can seem so boring. Blue by default, purple when visited, always underlined. Where’s the fun in that? As a result, we can be tempted to look for ways to make them more interesting. I am constantly amazed at the different ways we have found to mess with the underlining of links. Let’s look at a few of them and see why they can be such a bad idea.

Replacing the underline with a border-bottom

I have noticed a growing trend among designers to replace the standard underlining of a link with a bottom border defined in CSS. The argument is that this improves legibility because the default underline clips the descenders of certain characters. Although this is true and a border is often much more attractive, I have concerns about the accessibility of this approach.

The problem is that some user agents have less than perfect CSS support and fail to render the bottom border. This makes it significantly harder to identify links, especially if you have some form of visual impairment.

I have seen the problem occur with Internet Explorer 5 (which one could argue is becoming less of an issue) but also on a number of mobile devices, which is a much more significant problem.

Generally speaking it is unwise to override the browsers default behaviour and so although I wouldnt rule this approach out entirely, I would suggest some degree of caution.

Replacing the underline with a dotted line

An even more worrying trend is the replacement of the traditional solid underline with a dotted border instead. This is most commonly used to distinguish between visited and unvisited links where visited links have the less prominent dotted underline.

Not only does this suffer from the same accessibility problem mentioned above, it also causes confusion among users as it doesnt conform to their expectations of what a link should look like. Because it is unfamiliar, users doubt whether it is still actually a link. This doubt is reinforced by the fact that a dotted underline is the default browser rendering (within some browsers) for acronyms and abbreviations.

Striking through visited links

Another popular approach these days is to put a line through visited links in much the same way you would cross out an item on a to-do list. Of course this is a fundamentally flawed analogy because unlike a to-do list a user could well wish to revisit a page they have previous viewed. By striking through a visited link designers are making it considerably harder to read and therefore more difficult to find, previously visited pages.

The idea of striking through a link is not without its merits however. After all, you could argue that simply indicating visited links by colour does in fact break accessibility checkpoint 2.1:

Ensure that all information conveyed with colour is also available without colour, for example from context or markup.

Although this point is debatable, the principle of providing a non-colour based visual indicator of visited links is a good one. However, striking through the link is not the answer. Instead, consider adding an icon such as a tick immediately before or after the link. This approach does not obscure the text of the link but still communicates the concept that this page has been visited.

Removing the underline entirely

Although the abuses of the underline that I have outlined above are bad, they do at least give an indication to the user that “this is a link”. However, a growing number of sites are choosing to remove the underline entirely so leaving the user to guess as to what text is actually a link. Relying on the user to identify links by colour alone is not an advisable approach. At the very minimum they need some other visual cue that something is a link and the underline is the standard convention for this.

Ensure legibility

We have already discussed the problems associated with ’striking through’ a link. Another common practice is to ‘fade out’ visited links in order to make them less prominent. The problem with this approach is that it assumes users are not going to be seeking ways to return to previously visited pages. Users still need to be able to clearly read visited links and so they need to have sufficient contrast with background colours.

Indeed, all links (both visited and unvisited) need sufficient contrast in order to conform to accessibility checkpoint 2.2:

Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits or when viewed on a black and white screen.

Use clean semantic markup

The majority of this article has focused on the content of your link or how it is visually displayed. However, it is just as important to ensure that your link is properly marked up.

Although we all know how to create an ‘a’ tag it is still remarkably common to find this simple piece of code being abused. The most common culprits are the addition of style or behaviour elements into our code.

Let me give you an example of what I mean. Setting aside the ‘ethical’ debates about whether this is a good idea, it is not uncommon for links to external sites to open in a new window. I have encountered many sites that include code like this:

<a href="javascript:window.open(http://www.boagworld.com)" style="background: url(external.gif) no-repeat right;" >Boagworld</a>

When in actual fact the HTML could be as simple as this:

<a href="http://www.boagworld.com">Boagworld</a>

The rest could be managed using external style sheets and Javascript includes. A Javascript function could easily scan through all of the links on a page identifying those that link to an external domain. It could then override the default behaviour and open that link in a new window while at the same time applying the visual styling to the link.

This approach is the principle of Unobtrusive Javascript and provides many benefits most of which are beyond the scope of this article. However, it is worth noting that not only is your code cleaner, but this approach also allows you to change the default behaviour of your links without having to edit every link on the site.

Finally, this article would not be complete without briefly mentioning the application of Microformats to link elements. Like Unobtrusive Javascript, Microformats are far too broad a discussion to cover here (but read John Alsopps article for a comprehensive overview).

However, it is worth noting that it is possible to add a vast amount of semantic meanings to links simply by marking them up as Microformats. Through Microformats you can specify whether a link relates to creative common licenses, or whether it contains contact or event information. You can review links, tag links or even explain your relationship with the website owner being linked to. Although Microformats are still in relative infancy, the potential for building applications that leverage all of this hidden meaning is immense. Best of all, this is achievable by simply adding some extra attributes to the humble ‘a’ tag.

A fundamental tool

Hopefully this article has given you a renewed respect for the humble hypertext link and helped you recognised the fundamental role it plays.

I know that throughout much of it, I have sounded like a killjoy, intent on crushing any creativity in your design. But I think it is important to remember that our job is to improve usability not produce a piece of modern art. The majority of people using the web lack confidence. To them every time they go to a different site they are faced with a new and strange user interface. We have no right to undermine one of the few consistencies they have between sites… the humble hypertext link.

Like this article? Digg it!