Skip to content Skip to site navigation Skip to service navigation

Hyperlinks

Using descriptive text for hyperlinks helps website visitors scan for relevant information, identify outside resources, and choose which links are the most relevant for their needs.

In addition, some assistive technologies, such as screen readers for blind and visually-impaired individuals, have the ability to scan and present a list of all the hyperlinks available on a webpage. This allows a person to quickly jump to the relevant link instead of being forced to listen to the entire page line-by-line.

Tips for hyperlinks

  • Communicate the purpose or function of the hyperlink as part of the link name.
  • Be as descriptive as possible without being overly long as some assistive technologies (e.g., screen-readers) will read the entire link text before moving to the next text content. Try keeping the hyperlink text under 120 characters.
  • Integrate the link into your sentence, sighted users will see the link, and screen readers will hear the link.
  • Ask yourself when writing a link text, "Will the reader know where they are going just by the link text alone?"

Assistive Technology and Hyperlinks

Some assistive technologies can extract all the hyperlinks on a web page and present that information to the user. This allows an individual to quickly scan the hyperlinks and jump to the most relevant hyperlink on the page. 

Screenshot of VoiceOver screen-reader displaying list of hyperlinks on web page. 

The above example shows how a screen-reader could present the list of hyperlinks from the Stanford website. Providing descriptive link text can simplify interacting with electronic content and provide greater opportunity for the website visitor to find and engage with the information they are seeking.

Examples of appropriate link text

Examples of inappropriate link text

When using an image as a link, there are some specific rules that need to be followed. As discussed on the image ALT text concept pages, using an empty ALT text is fine for images that are purely decorative. However, as soon as you put an image inside of an anchor (link), then that image is no longer decorative, it is functional and the ALT text of the image needs to follow the function and not be descriptive of the actual image. For example: 

<a href="https://stanford.edu">
   <img src="https://uit.stanford.edu/image.jpg" alt="Stanford University Homepage" />
</a>

There are some variations on this pattern though that should be addressed. If there is link text in addition to the image, then having an empty ALT text is preferred.

<a href="https://stanford.edu">
   <img src="https://uit.stanford.edu/image.jpg" alt="" />Stanford University
</a>

If the image link is redundant to another link that is adjacent to the image link, then removing that first link entirely from assistive technology is preferred. This involves two steps. First, remove the image link from the tab order using a negative tabindex value. Second, add an aria-hidden attribute to the image link (adding a role of presentation to the link would also work). 

<a href="https://stanford.edu" tabindex="-1" aria-hidden="true">
   <img src="https://uit.stanford.edu/image.jpg" alt="" />
</a>
[... snip ...]
<a href="https://stanford.edu">
   Stanford University
</a>
Last modified June 3, 2021