Digital AccessibilityCore ConceptsLinks

Links

Importance of Links

Having clear, concise, and meaningful links can improve both the accessibility and usability of your digital content.

Links should provide a quick and clear understanding of the link destination. People scan the content for links whether they use assistive technology or not. Providing a link that describes its destination allows the link to be understood out of context from its surrounding text. This is especially helpful to those using assistive technology to scan through a list of links pulled from the page content or who are navigating through a page by the links.

Lengthy text links, links that span multiple lines, ambiguous links, and some URLs (web addresses) hinder people’s ability to assess the links quickly and easily in the content. Providing concise, meaningful, descriptive, and clearly identifiable links lets people quickly understand their purpose and decide whether to select them.

Link Text Examples

Meaningful, Concise Link TextAmbiguous or Lengthy Link Text
Majors and degree programshttps://admission.wsu.edu/academics/fos/Public/index.castle
About Butch CougarThis first cougar mascot was named Butch in honor of Herbert “Butch” Meeker of Spokane, who was WSU’s football star at the time.
Learn more about WSUMore Information

Common Errors

These common errors hinder the accessibility and usability of digital content.

  • Link text does not describe the link destination.
  • Links with the same link text go to different destinations.
  • Linked images do not have alternative text or have an alternative text that describes the image.
  • Links open into a new tab without warning (web pages only).
  • Links to files and other digital formats are not indicated in the link text.
  • Links are not distinguishable from the rest of the text content, either through color contrast, or underline. Or for hovering on web pages only.
  • Links do not have a focus indicator (web pages only).

Best Practices 

Follow these best practices to improve the accessibility and usability of links in your digital content.

  • Use clear and concise language for link text.
    • Avoid link text that is more than a few words.
  • Use unique and meaningful link text that describes the link destination that can be understood out of context.
    • Avoid the same link text that goes to the different destinations.
    • Avoid vague link text.
      Examples: like, click, click here, more information, read more.
  • The alternative text of linked images must describe the link destination and not a description of the image.
  • Use the same link text for links to the same destination.
  • Avoid using a URL (web address) as the link text.
  • Text underlining should be reserved for links and not used for emphasizing text.
  • Avoid opening links into a new tab unless specifically indicated (web pages only).
  • Links to files or other digital formats should be indicated in the link.
    Example: Core Concept Check Sheet (PDF)
  • Links are visually distinguishable from the surrounding text content.
    • Links have appropriate color contrast: Link color should contrast sufficiently and meet the color contrast ratio requirements (WCAG 2, AA).
      • 4.5:1 color contrast ratio for link text color to background color.
      • 3:1 color contrast ratio for link text color to surrounding text color.
    • Underline links when the link color is less than a 3:1 contrast ratio with the surrounding text.
    • Link on hover & focus formatting options (web pages only):
      • Underline text on hover and focus when link text color is a 3:1 ratio with surrounding text.
      • Use a different background color when link text color is a 3:1 ratio with surrounding text or when link text is also underlined.
      • Use an outline or border when link text color is a 3:1 ratio with surrounding text or when link text is also underlined.
      • A hover state color change (i.e., non-text interface component) should have a color contrast ratio of at least 3:1 with adjacent colors and with its default state color.
  • Links have a visual focus indicator (web pages only).
    • A link focus indicator is a visual feature that brings focus to a link when navigated to either by using a mouse, keyboard, or assistive technology.
      Example: A rectangle may appear around a link when it is navigated to.
  • A link focus indicator (i.e., non-text interface component) should have a color contrast ratio of at least 3:1 with adjacent colors (web pages only).

Accessibility Checks 

Use this checklist as a guide to ensure your links are in an accessible format.

  • Link text is concise, meaningful, and describes the link destination. Links for the same link destination have the same link text.
  • Links to different destinations use different link text.
  • Linked image’s alternative text indicates the link destination and not a description of the image.
  • Link indicates it opens into a new tab when it does (web pages only).
  • Underline, when used, is used only for indicating text links.
  • Links are visually distinguishable from the rest of the text content.
  • Links have a visible link focus indicator (web pages only).

Download Digital Accessibility Check Sheet (PDF) 

Additional Resources