Hyperlinks

Downloadable page: Download Lesson on Hyperlinks

The Standards

WCAG 2.0 Guidelines:

  • Guideline 2.4.4 Links to an external site. "Link Purpose (In Context): 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. (Level A)" (W3C)
  • Guideline 3.2 Links to an external site. "Make Web pages appear and operate in predictable ways." (W3C)

What do the Standards Mean?

A URL (a.k.a hyperlink) can be a long string consisting of letters, numbers, dashes, underscores, and other characters that connect the user to a web link. These combinations are not “words” and are often not meaningful or descriptive. This can be problematic for all users not only users of assistive technologies.  Adding display text to URLs makes them easier to read and understand for all users. There are a number of factors to consider when creating display text.  

Readability and Length

Readability and length are two factors to consider when creating display text to replace a URL. When a screen reader reads a URL it may sound non-sensical since the long string of characters used in the URL are not “words”. Providing readable display text with meaning in the content allows a user to understand the relevance of that link.  

While there no minimum or maximum limits or restrictions on the length of display text, there are some recommended best practices.  

  1. Display text should be concise yet long enough to convey the meaning of the link.
  2. Avoid using entire sentences or paragraphs as display text. Display text of this length is often unnecessary and creates frustration for screen reader users since they must listen to the all of the display text . Short, concise links are less likely to frustrate screen reader users than long, imprecise links.
  3. A descriptive short URL (e.g., a site’s homepage) can be used as the link text and does not require display text to meet compliance.
  4. Creating display text of only one character can provide difficulty for some users.  If it is necessary to create display text of only one character, the recommendation is to increase the font size of the display text and add additional whitespace around the small display text. This will help to limit the issues encountered by users.  
  5. Avoid empty links. The display text provided should always link to a location where content is presented. Empty links are still navigable and can be frustrating for users.

Description and Meaning

A well designed link should be meaningful and descriptive.  The display text should provide the reader with the purpose of the link even when out of context.  Assistive technologies, such a screen readers,  have the ability to present a list of links on a web page to the user.  Using descriptive and meaningful links assists users in deciding which links to follow.  

Opening a New Window

Display text should only open a link in a new window or tab when necessary.  Opening links in a window or tab can be confusing and disorienting for some users, particularly those user who have difficulty perceiving visual content.  Here are a few examples of when content should open in a new window:

  • Context-sensitive information (e.g., help instructions)
  • An alternate means of completing a form (e.g. a calendar-based date picker)
  • In cases where the following a link will cause the user to be logged out of a secure area of a site

When it is deemed necessary to open a link in a new window, user should be provided advanced warning.  This can be accomplished through a visual warning or a warning spoken through the use of assistive technology.  Each of these warnings should state that this link opens in a new window.  

Avoid using uninformative link descriptions

Links such as click here, read more, here, etc. do not offer a meaning and are unnecessary.  Typically, these uninformative links precede a more meaningful phrase so it makes sense to eliminate the uninformative link and use the more meaningful phrase as the display text.  In some cases it may be appropriate to include words like more in the display text; however it is usually best practice to avoid them especially if the same meaning is being conveyed in the context.

Following these guidelines and recommendations, when creating display text for URLs (a.k.a. hyperlinks) will result in descriptive and meaningful links that are functional and user-friendly; thus, providing a better experience for all users.

Resources

Information on this page is from the following resources about hyperlinks:

  • W3C Hyperlinks. Links to an external site. Retrieved January 24th, 2016. 
    • This website, w3.org, is the website for The World Wide Web Consortium (W3C), which is a community of individuals who develop web standards. The guides on this website include extensive recommendations, examples, related resources and other helpful tools.
  • WebAIM Hyperlinks. Links to an external site. Retrieved January 24th, 2016. 
    • WebAIM is a non-profit organization associated with the Center for Persons with Disabilities at Utah State University. It is one of the leading resources for information on accessibility.
  • Quick Reference Guide to Section 508 Requirements and Standards. Section 508.gov. Retrieved January 23, 2016.
    • This page contains the Section 508 standards as of January, 2016. This does not contain the refreshed standards proposed in February 2015.

Estimated time: 10 minutes