Hyperlink Text and Titles

WAI Guideline 13 instructs Web designers to "provide clear navigation mechanisms . . . to increase the likelihood that a person will find what they are looking for at a site." Navigation mechanisms refer to the way visitors travel from one page to another within a Web site. In general, this is accomplished through the use of hyperlinks, although the techniques used to implement such links vary widely. Hyperlinks are created using the HTML "anchor" tag (which is abbreviated by the letter "a"). The hypertext reference (or "href") attribute is required inside the opening anchor tag to identify the destination of the link. The text of the hyperlink is chosen by the Web designer, and is placed between the opening and closing anchor tags. The HTML code below shows how a hyperlink is constructed.

  Read a brief <a href = "bio.html">biography of Monet</a>.

When displayed by a Web browser, the link text usually appears underlined or in a different color to distinguish it from ordinary text. Visitors can select this link text and their browsers will take them to the document referred to in the "href" attribute. In this example, the link text is "biography of Monet".

Read a brief biography of Monet.

To observe Guideline 13's instructions for clear navigation, some additional steps should be taken when creating hyperlinks. First of all, the link text chosen should clearly describe the information resource that the link leads to. This rules out the use of the phrase "click here," which has no meaning (and also assumes visitors are using a mouse). Some adaptive computer tools provide users with a list of all the links on a page, so they can easily choose a link without having to read the entire document. However, vague link text does not inform users where the hyperlinks will lead. For example, three poorly-designed hyperlinks are shown below (first as HTML code, followed by their rendered version).

  For a biography of Monet, <a href = "bio.html">click here</a>.
  For a list of Monet’s works, <a href = "works.html">click here</a>.
  For historical background, <a href = "history.html">click here</a>.

For a biography of Monet, click here.
For a list of Monet’s works, click here.
For historical background, click here.

Visitors who read the hyperlinks out of context will see or hear only "click here, click here, click here." A better version would include link text that makes more sense to the user: "biography of Monet, list of Monet’s works, Monet’s historical era."

  Read a brief <a href = "bio.html">biography of Monet</a>.
  See a <a href = "works.html">list of Monet’s works</a>.
  Learn about <a href = "history.html">Monet’s historical era</a>.

Read a brief biography of Monet.
See a list of Monet’s works.
Learn about Monet’s historical era.

A second technique to clarify navigation is the use of the "title" attribute within the anchor tag. Though this is an optional step, it can help to further amplify the destination of hyperlinks.

  Read a brief <a href = "bio.html" title = "Biography of Monet">biography of Monet</a>.

Read a brief biography of Monet.

All of the hyperlinks within Access Art utilize both of these features to clarify navigation. The site uses the title attribute and descriptive link text that makes sense even when standing alone. A typical content menu is shown below, and the meaning of the links is unambiguous.

3 POINT Sam Gilliam (b. 1933) American
3 POINT, 1970
Acrylic on canvas
Height 9 feet, 10 inches Width 24 feet, 8 inches
Museum purchase, 1987.57

ART IN CONTEXT
DIALOGUE WITH THE DIRECTOR
AN ARTIST COMMENTS ON ART
IMAGE DESCRIPTION

This site also incorporates additional navigation features in its menu system, as described on the Navigation Menu page.