Accessibility - Descriptive hyperlinks

Hyperlinks are the bridges of the web—but vague phrases like “click here” or “read more” often leave users guessing where those bridges lead. For individuals using screen readers or navigating with cognitive or motor challenges, unclear links can be frustrating or even inaccessible. Descriptive hyperlinks solve this problem by clearly indicating the destination or purpose of a link, making digital content more usable, professional, and inclusive.

What are descriptive hyperlinks?

Descriptive hyperlinks are linked phrases that give users a clear idea of the content or destination they’ll reach when the link is selected. These benefit everyone, but they are especially useful for:

  • Individuals who use screen readers due to low vision, blindness, or cognitive disabilities

  • Users with limited motor control who may struggle to select single-word links

  • People scanning content quickly or navigating via assistive technologies

Many screen readers like NVDA, JAWS, and VoiceOver allow users to hear just the links on a page. If those links don’t make sense out of context, the experience becomes confusing and inefficient.

Benefits of descriptive hyperlinks

  • Improved accessibility for users with disabilities

  • Better usability for all site visitors

  • Enhanced SEO: Search engines like Google favor “context-rich” link text

  • Cleaner, more professional presentation of digital content

Best practices for using descriptive hyperlinks

Follow these guidelines to ensure your links are accessible and effective:

  • Write links that make sense out of context. Avoid vague phrases like “click here” or “read more.”

  • Use phrases, not single words, to make links easier to select and understand.

  • Maintain visual clarity:

    • Underline text links

    • Use a color contrast that distinguishes links from surrounding text

    • Ensure hover and focus states are visually distinct

  • Include alt text for image-based links that clearly describes the destination

  • Audit your content regularly to check for broken or outdated links. Automated scans can help, but manual review is often more accurate.

Examples: descriptive vs. non-descriptive link text

Following are examples of inaccessible link text along with corrected examples. The main issue with the inaccessible links is that they do not clearly indicate a specific destination.

Examples of link text which is not ideal:

  • Example 1: Click here for instructions.
  • Example 2: Learn more about color and accessibility here and here
  • Example 3: Story 1-Full Title (Read More) | Story 2-Full Title (Read More)
  • Example 4: Accessibility 101 (Register) | Accessibility 102 (Register)

Corrected examples:

  • Example 1: Instructions for the tool are available online.
  • Example 2: Learn more about contrast and color coding,
  • Example 3: Story 1 full title, Story 2 full title
  • Example 4: Register for Accessibility 101, Register for Accessibility 102,

Additional notes

  • “Click here” and “read more” may be acceptable in newsletters if paired with descriptive HTML code.

  • For developers, WCAG 2.1 includes specific success criteria for link accessibility, such as providing link text that describes the purpose of a link.

 

Print Article