Page Content

Helping users understand the destinations of links is an important step towards increasing the usability and accessibility of a Web page.

Guidelines for In-Text Links

These guidelines apply to links embedded within the text of a document or a Web page.

Write links that make sense out of context. Use descriptive link text detailing the destination, not just “click here,” or other ambiguous phrases Link text should be made up of phrases rather than single words, so that users with limited motor control will not have difficulty selecting links.

NOTE: Some search engines, such as Google, give higher rankings to sites that use “context-rich” text links.

WCAG 2 Guidance

WCAG 2.2 Guideline 2.4.4. “The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.” Review this WCAG 2.2. Guideline.

Other In-Text Link Design Guidelines

1. Maintain the standard that text links are underlined and are a different color value (lighter or darker) than the main text. This provision will help colorblind users find links more easily, and is good usability practice.
2. Avoid links opening in a new window unless absolutely necessary. New windows are disorienting to users of both screen readers and visual browsers (because the Back button becomes "disabled") Also be aware that some users of visual browsers disable pop-up windows to avoid advertising.
   NOTE: If links do open in a new window, include a textual indication (e.g. External Resources [New Window]) so screen reader users are aware of the new window.
3. If you use JavaScript links, such as those to open pop-up windows, make sure they are coded to be accessible to screen readers. Many JavaScript links are unusable in screen readers.
4. If you use an image or image map to create links, make sure the destination is included in an ALT tag. See the Image Maps and Image pages for more details on creating accessible links with images.
5. You can insert "Top of Page" links after each section in longer documents to reduce the need to scroll up (which can be difficult for motion impaired users). These links should be formatted differently from other links so that users know they are page-internal.

Guidelines for Blocks of Navigational Links

These guidelines apply primarily to blocks of navigational links in Web pages or PDF files.

1. If your Web site uses a block of navigational links on each page, make sure a skip navigation strategy has been implemented so that screen readers can avoid reading these links on each page.
   WCAG 2.0 Guideline 13.6—"Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group."
2. Whenever possible, break up long lists of links into categorized blocks separated by headers (e.g. H1, H2). Otherwise, you may have to implement a Skip Navigation strategy.

3. Maintain a consistent set of navigational links on every page of your site, even if you must implement a skip navigation strategy.
4. You can place a breadcrumb trail, a listing of the page’s location in the site’s hierarchy, below the page’s title bar to help users keep track of their location within a complex site.

Bread Crumb Trail Example

NOTE: The safest symbol indicating a subordinate page is the colon (:) instead of punctuation symbols like » ("Right double angle bracket) or > ("greater than"). It’s also best to avoid to avoid arrow symbols (e.g. →) since they may not even be pronounced by a screen reader.

Top of Page