Links and Hypertext
Link Text and Appearance

Link Text

Avoid uninformative link phrases

As mentioned previously, links are more useful when they make sense out of context. Authors should avoid non-informative link phrases such as:

  • click here
  • here
  • more
  • read more
  • link to [some link destination]
  • info

In fact, the phrase "click here" is unnecessary, even if it precedes a more meaningful phrase. For example, a link that says "click here to access today's weather" can be shortened to "today's weather." In some cases it may make sense to precede a link phrase with "more" or "read more about," (e.g. "more about global warming"), but if these extra words can be avoided, it is probably best to avoid them (e.g. "global warming" may convey the same meaning as "more about global warming," depending on the context).

URLs as links

Web addresses, or URLs, present two types of challenges:

  1. Readability
  2. Length

URL readability

The first challenge is that URLs are not always human-readable or screen-reader-friendly. Many URLs contain combinations of numbers, letters, ampersands, dashes, underscores, and other characters that make sense to scripts and databases but which make little or no sense to the average person. In many cases, it makes sense to use human-readable text instead of the URL. The human readable link Constructing Accessible Web Sites - external link is more user-friendly than the link to purchase the book by the same title on Amazon.com, which consists of a 108-character link full of numbers, slashes, and text that is not very human-readable. (http://www.amazon.com/exec/obidos/ASIN/
1590591488/qid=1116957951/sr=2-
1/ref=pd_bbs_b_2_1/103-5755258-8204633 - external link
)

Does this mean that URLs should never be used as links? No. If the URL is relatively short, there is probably no problem with using the URL as the link text. The key is to be considerate of screen reader users who must listen to the longer, less intelligible URLs.

URL length

The second problem is that some URLs are quite long, and some browsers refuse to let long URLs wrap to the next line, so the links extend off to the right beyond the visible area of the browser. These long URLs are generally generated by database-based web sites or web applications that transfer a number of variables through the web address itself. The above link to the book on Amazon.com is a perfect example. In fact, the long link text was modified by adding two spaces in the middle of the URL, to allow it to wrap to the next line. Mozilla-based browsers such as Firefox and Netscape do not allow long URLs to wrap unless the author introduces a space somewhere.

The original width of the screen shot below was over 2000 pixels, stretching across two monitors. Imagine placing a long link such as this in a web page. Users would have to scroll a long distance horizontally in order to read the entire thing.

An example of a very long URL with over 300 characters (from an image search on google.com)

Even worse, imagine listening to the link with a screen reader! Hardly anyone would ever have the patience to listen to all of that undecipherable mess. The link above could be shortened to "California seagull stock photos," since the link goes to a page with stock photography of California seagulls.

Link Appearance

Links should look like links, and nothing else should. Users may get frustrated if they try to click on textual phrases or graphics that look like links but are not. They will also be frustrated if they have to move their mouse all over the page trying to discover links that do not look like links.

Underlining

Browsers underline hypertext links by default. It is possible to remove the underline using Cascading Style Sheets (CSS), but this is a bad idea most of the time. Users are accustomed to seeing links underlined. They may or may not be able to figure out which text is linked if the underline convention is not used.

Example

Which words or phrases in the screenshot below are links and which are not?

Black text at the top says 'solutions,' with 11 words or phrases in blue; none of them is underlined.

It turns out that all instances of text are linked. Users can click on the black text and each instance of blue text. Designs like this make users guess, or find out by trial and error. It is much better to underline links in the main content of a Web page.

As with most every assertion, there are exceptions. Although users are accustomed to seeing links in the main content underlined, they are also accustomed to seeing tabs and main navigational features (oftentimes created as graphics rather than text) without underlining. In fact, it is extremely difficult to find any major web site that underlines its main navigation links.

Examples

Many web sites underline links in the main content, but not on the main site navigation, as shown in these screenshots.

The main navigation on IBM.com is text without underline

The IBM site uses real text. Interestingly, when users hover over the text with a mouse, the underline appears, as if to reassure users that these really are links. Most users already have figured out that these are links, because they look like the site's main navigation. Nevertheless, the suddenly-appearing underline may be helpful to some people.

Seven graphics on the left hand side of the page serve as navigation on the 10,000 villages website.

The "Ten Thousand Villages" site uses graphics instead of text. The text never appears underlined.

A horizontal three-dimensional area behind text serves as a background for the main navigation on Macromedia.com.

The main navigation on the Macromedia site is built in Flash. The text is never underlined.

Hover and focus effects

A lot of sites have implemented visual hover and/or effects. These effects serve an aesthetic purpose, in that the effects seem kind of "cool" and artistic. They also serve an accessibility purpose in that they help users know that the mouse or keyboard focus is on a particular link, and that the link is active.

In most cases, the effect appears as a a glow or highlight on or behind the link text.

In other cases, the link text changes colors.

This technique is not limited to the main navigation of a site. It can also be used effectively on links in the main content.

To make this effect device-independent, it is necessary to ensure that it can be activated by either the mouse or the keyboard. In CSS, this means using both the :hover and the :focus pseudo-classes. The :active pseudo-class may also be used.

Example

The following CSS markup will cause the background of a link to turn to a light yellow and the link text to turn to a maroon when the user hovers over it with a mouse, tabs to it with the keyboard, or clicks on the link with either the mouse or the Enter key.

a:hover,
a:focus,
a:active
{
background-color:#ffffcc;
color:#990000;
}

WebAIM is an initiative of:
Center for Persons with Disabilities (CPD) Utah State University