WCAG 2.4.9 Link Purpose (Link Only)

Introduction

This document provides information about the following Acquia Web Governance accessibility check:

• Do links with the same accessible name have the same purpose? 

What

When multiple links on a webpage share the same accessible name, they must direct users to the same destination or provide equivalent resources. This ensures that users, especially those who use screen readers, receive a consistent navigation experience.

The accessible name of a link is the text or label that assistive technologies such as screen readers use to describe it. Accessible names come from the following:

• The link text itself.
• aria-label or aria-labelledby attributes.
• The title attribute, even though it is not always announced.

Why

Users expect that links with the same label will lead them to the same or equivalent content. 

Who

Affected users

This check affects users who have:

• Blindness or visual impairments: Who use screen readers to navigate and understand content. These users rely on link names to understand their function.

WCAG 2.4.9 Link Purpose (Link Only)

Introduction

This document provides information about the following Acquia Web Governance accessibility check:

• Do links with the same accessible name have the same purpose? 

What

When multiple links on a webpage share the same accessible name, they must direct users to the same destination or provide equivalent resources. This ensures that users, especially those who use screen readers, receive a consistent navigation experience.

The accessible name of a link is the text or label that assistive technologies such as screen readers use to describe it. Accessible names come from the following:

• The link text itself.
• aria-label or aria-labelledby attributes.
• The title attribute, even though it is not always announced.

Why

Users expect that links with the same label will lead them to the same or equivalent content. 

Who

Affected users

This check affects users who have:

• Blindness or visual impairments: Who use screen readers to navigate and understand content. These users rely on link names to understand their function.
• No impairments: Users may encounter difficulties if identical link names lead to different destinations.

Examples

This section provides some pass and fail examples of this check.

Pass examples

• Identical link text that leads to the same destination

  copy

  <a href="https://example.com/about">Learn More</a>  
  <a href="https://example.com/about">Learn More</a>  

  Why this works:

  • Both links that are labeled Learn More lead to the same URL, /about.
  • Both links provide the same information.

• Identical link text that leads to equivalent pages

  copy

  <a href="https://example.com/cats">Read More</a>  
  <a href="https://example.com/felines">Read More</a>  

  Why this works:

  • /cats and /felines provide equivalent content about the same topic.
  • Both links give the same level of information.

• Links that have identical names but different parent context

  copy

  <h2>Dogs</h2>
  <a href="https://example.com/dogs">Learn More</a>
  <h2>Cats</h2>
  <a href="https://example.com/cats">Learn More</a>

  Why this works:

  • The surrounding headings provide unique context for each Learn More link.
  • Screen readers announce the heading before the link, which clarifies its purpose.

Fail examples

• Identical link text leading to different, unrelated destinations

  copy

  <a href="https://example.com/about">Learn More</a>  
  <a href="https://example.com/contact">Learn More</a>  

  • Issue:
    • Both links look the same but lead to different pages.
    • Users do not know what to expect when they click the link.

  • Fix:

    copy

    <a href="https://example.com/about">Learn More About Us</a>  
    <a href="https://example.com/contact">Contact Us</a>  

    The link purpose is clear and distinct.

• Visually identical links without programmatic distinction

  copy

  <a href="https://example.com/about">Read More</a>  
  <a href="https://example.com/services">Read More</a>  

  • Issue:
    • Users do not know which "Read More" leads to which topic.

  • Fix:

    copy

    <a href="https://example.com/about">Read More About Our Company</a>  
    <a href="https://example.com/services">Read More About Our Services</a>  

    The updated text provides clarity about the purpose of each link.

How

This section provides instructions on how to review and fix the issue.

How to review it

This section provides steps to follow to ensure that link names with identical accessible names have an equivalent purpose.

1. Check for duplicate link text.
   • Look for repeated link labels on the page.
2. Verify that any duplicate link destinations are the same or equivalent.
   • If the links look identical, ensure that they direct the user to the same place.
   • If they lead to different places, edit the link labels to make them distinct.
3. Check for contextual cues.
   • Surrounding content such as headings must make the purpose of each link clear.
4. Ensure that accessible names match the link purpose.
   • Compare visible link text with attributes like aria-label or title.

How to fix it

This section provides instructions on how to fix this issue.

• Use unique and descriptive link text

  Example:

  copy

  <a href="https://example.com/jobs">View Job Openings</a>  
  <a href="https://example.com/internships">View Internship Opportunities</a>  

• Ensure that all identical link text directs the user to the same or equivalent resource

  Example:

  copy

  <a href="https://example.com/pricing">See Pricing Plans</a>  
  <a href="https://example.com/pricing-details">See Pricing Plans</a>  

• Use contextual headings when you reuse generic link text

  Example:

  copy

  <h3>Product Features</h3> 
  <a href="https://example.com/features">Learn More</a> 
  
  <h3>Customer Support</h3> 
  <a href="https://example.com/support">Learn More</a> 
  

Additional resources

WCAG criteria

WCAG 2.4.9 Link Purpose (Link Only)