Clear, concise, and meaningful links can improve the accessibility, usability, and reach of your website.

Both sighted users and people who use screen readers often scan pages for links and headers to help them quickly find information on a web page. If links are not clearly identified or do not make sense, the user may overlook them or not know the destination of the links before they are selected.

When writing link text, use specific text to describe the link destination or purpose. Avoid unclear links like “click here,” and don’t just use the URL. Link text should supply enough information so that the user can determine its purpose and decide whether to select it. Avoid overly long links as well.

Avoid duplicating links with the same link text that go to different destinations. This is another reason why “Read More” and “More Information” do not work well as link text. These are not only vague, but also confusing to screen reader users who will not be able to distinguish one “read more” link from anther out of each link’s visual context.

Common Errors

  • URLs are used for link text.
  • Links are not descriptive.
  • Links going to the same destination are used more than once on a web page.
  • Keyboard users do not know where they are on a web page, because links do not have link focus indicators.
  • Links do not have enough color contrast between the background color and/or the surrounding text.
  • Additional visual cues (e.g. color change) are not provided when a link is hovered over or receives focus.

Use links like this

Don’t use links like this

Links opening a new web browser window or tab are strongly discouraged.

Although it won’t show an accessibility issue in most audits, it’s still best not to use this feature unless it is absolutely required to prevent losing user-entered content (like on a web form). It presents a variety of issues:

  • Accessibility Issue: Assistive devices do not necessarily tell users a new web tab or window has opened when a user follows such a link.
  • Usability Issue: Opening in a new web tab or window breaks the web browser’s “back” button functionality. The default behavior of a web browser is to remain in the same tab so the “back” button works.
  • Security Issue: Unscrupulous people can inject a snippet of code on a link that opens in a new web tab/window and cause havoc for users.

Exception: There is one instance where opening in a new tab/window is helpful: when users need to gather information or transfer information from one web page to another. Being able to go back and forth between the two tabs/windows is convenient. Letting users know they are opening a new tab/window is best practice if you must open the link in a new tab/window. Having this indication is especially useful to people using a screen reader.

Link style changes are made within the site’s styling (CSS) and are not made within the web page or text editor. In order to maintain a cohesive and predictable experience for users you should not override the site’s global styles.

Do not use underlining for general text unless it’s required in a quotation or a similar element. Use bold or italics for emphasis if needed.

When linking an image, like a logo, be aware that the alternative text (“alt text”) acts as the link text.

This means the alt text needs to both:

  1. Describe the image.
  2. Let the user know where they are going when the image is selected.

It must serve as both effective alt text and effective link text.