Links and Hypertext
Link Text and Appearance
Article Contents
- Page 1: Introduction to Links and Hypertext
- Current page: Page 2: Link Text and Appearance
- Page 3: Hypertext Links
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).
Link length
Long links
What is the maximum allowable length of link text? This is a reasonable question to ask. There is no set answer though. The most accurate answer is that the link needs to be long enough to convey the purpose of the link and no longer. Such a vague answer is open to wildly different interpretations, but perhaps this is not such a bad thing. Content authors need to have the freedom to give meaning to their content in the ways that make sense to them. Still, as a general rule, links should be as concise as possible without sacrificing meaningfulness.
Some authors have made links out of entire sentences, entire paragraphs, or even multiple paragraphs. These long links are almost certainly unnecessary, and are not user-friendly for screen reader users. Remember that screen reader users cannot visually skim through lengthy links. They must listen to the entire text. Some screen reader users get frustrated with long link text and impatiently move on to the next link if they cannot understand the purpose of the link after the first few words. Authors have no control over user behavior such as this, but they do have control over some of the reasons that can lead to users to get frustrated. Short, concise links are less likely to frustrate screen reader users than long, imprecise links.
Short links
What is the minimum allowable length of link text? This is another reasonable question, also with no set answer. In most cases, links should be words or phrases. In some instances, though, it may make sense to link a single character, letter of the alphabet, or numeral. For example, an alphabetical index may use each individual letter of the alphabet as a link.
The danger in using single characters as links—or in using any sort of small link (such as a 10 pixel by 10 pixel graphic)—is that some users will have difficulty clicking on such a small area. Someone with cerebral palsy, for example, may be able to use the hands to manipulate a mouse, but may have difficulty with the precise movements and muscle control necessary to click on a small link. This person may have to click two or three times to hit the target, and may end up clicking on the wrong link in the process, which would require the user to hit the button in the browser and try again.
Users do have some control over link size. They can purchase a screen enlarger like ZoomText or MAGic, which would render the link targets larger. Users can also enlarge the fonts in their browser without using a screen enlarger. The Opera browser allows users to enlarge the entire web page. In this sense, small links are not the worst accessibility problem that users can face. At the same time, authors can limit the potential damage by increasing the size of small links, increasing the font size of single character links, or making the target area larger by including non-breaking spaces within the link.
Example
The non-breaking spaces (shown in the markup as )
surrounding the letters "A" and "B" in
this example help to make the link target larger for people
who may have difficulty clicking on small areas.
<a href="#a"> A </a> | <a href="#b"> B </a> |
...etc.
URLs as links
Web addresses, or URLs, present two types of challenges:
- Readability
- 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.
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.
Alternative text for images used as links
When images are used as links, the alt text
performs the function of link text. As with linked text, the alt text
of linked images does not need to inform users that the link is
a link, since they already know. One interesting dilemma though is to decide
how important it is to describe the visual characteristics of the
image in the alt text, since the purpose of alt text
is to substitute for the image in cases where users cannot see it. In most cases,
the visual characteristics of the image are less important than the
link destination.
Example
The graphic in this example could be described as "a horizontally-aligned, pill-shaped, somewhat three-dimensional-looking object, with royal blue on top fading to red on the bottom, with the colors slightly darker on the left side and slightly more washed out on the right side, with the word 'Products' written in white bold Arial text on top of the pill-shaped object, suggesting that the object is a link to a list or explanation of products."
The description would be entirely accurate, but quite unnecessary.
The purpose of the graphic in this instance is to link to
the products section of a web site. The alt text
should reflect the purpose of the graphic more than its visual appearance.
Most screen reader users will not care what the button looks
like, especially if the description is long. An alt text
of "Products" will do nicely.
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?
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 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.
The "Ten Thousand Villages" site uses graphics instead of text. The text never appears underlined.
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:
