Write helpful links

Links allow users to navigate a website or web application. An effective link is self-explanatory, telling the user where they will go if they click on the link. Links are also easy to distinguish from other content.

  • Put key words at the beginning of the link phrase. Links that begin with key words are easier to scan, because the important words appear early in the link phrase. For people who have content read aloud by software, unique and descriptive links with keywords at the start of the phrase make it easy to find a clear path to the information they are seeking. In the absence of effective links, users may have to follow links in order to ascertain their destination.
  • Use underlines, especially for inline links. Typically, links are colored and underlined so that they can be easily distinguished from other text. Underlines are helpful for people who have color perception impairments that may cause difficulty identifying links that are only identified through color (see Provide visual and semantic structure).

Testing

  • Use your keyboard to navigate through all the links on your page and examine the link text. Does the link text make sense out of context? Are the links identifiable as links for people who can't distinguish color?
  • Use a link list tool to list links separately from the page. Review the links to ensure they are self-explanatory.

Resources

✎ Technique: Writing link text

Link text is the text you select for a link that describing what happens when a user activates it. So it needs to clearly and accurately convey the link's purpose. Commonly, link text is the name of the linked page or document. When a link leads to a document that's not a web page, such as a PDF or Word document, that should be clarified in the link text. Avoid overly terse, ambiguous link text, and avoid reusing the same link text within a page for links that lead to different destinations.

Good link text helps all users find the information they need, and is particularly helpful for screen reader users, who might navigate pages by moving from link to link, hearing only the text of each link in turn. If the link text doesn't indicate the destination or purpose of the link, screen-reader users have to rely on listening to the surrounding text for context. 

Example 1

✗ Bad example

I think you should read this article about link text.

This link has text that does not indicate its purpose when read out of context: The screen reader would just announce "link: this." Screen readers also provide dialogs that list all the links in a page. If "this" was one of the links listed, it'd be impossible to tell where it might take you.

✓ Good example

I think you should read this article about link text.

After adjusting the link text, when the link is focused, screen readers will announce "link: article about link text." This link text is successful because its meaning is independent of its surrounding text.

Example 2

✗ Bad example

In these examples, the text of each link doesn't indicate their purpose. The links also have identical text, despite linking to different resources. This poses an additional cognitive issue because links that are labelled the same way shouldn’t do different things.

✓ Good example

We can improve this example for screen reader accessibility, and simultaneously make it less complex by making it a simple list of links: