Links and Hypertext
Link Text and Appearance
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
- read more
- link to [some link destination]
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:
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 most cases, it is better to use human-readable text instead of the URL. The human readable link Constructing Accessible Web Sites 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)
Does this mean that URLs should never be used as links? No. If the URL is relatively short (such as a site's homepage), the URL may be used as the link text. The key is to be considerate of screen reader users who must listen to the longer, less intelligible URLs.
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.
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. In body text, they may or may not be able to figure out which text is linked if the underline convention is not used.
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 these cases, the linked items should be designed so it is apparent that the user can click on them to perform an action.
WCAG 2.0 has 2 additional requirements for body text links that are not underlined by default:
- The link text must have a 3:1 contrast ratio from the surrounding non-link text.
- The link must present a "non-color designator" (typically the introduction of the underline) on both mouse hover and keyboard focus.
These two requirements help ensure that all users can differentiate links from non-link text, even if they have low vision, color deficiency, or have overridden page colors.
Hover and focus effects
Many sites have implemented visual mouse hover effects for links, such as adding background glows, drop shadows, color changes, or underlining. These effects help users know that the item can be clicked on and that mouse focus is on a particular link.
To make these effects 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
Nearly any time
a:hover (or other hover effects) are defined in CSS, it should be modified to be
a:hover, a:focus to ensure the same visual presentation is available when keyboard users navigate or 'tab' to the link.