WCAG 2.4.9 Link Purpose (Link Only)

Introduction¶

This check flags links with the same accessible name but have different purposes. It helps website owners to meet:

• WCAG 2.1 Success Criterion 2.4.9 Link Purpose (Link Only)
• WCAG 2.1 Success Criterion 2.4.4 (Link Purpose – In Context)
• WCAG 2.1 Success Criterion 3.2.4 (Consistent Identification.

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, get 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¶

This section provides information about why this check is important.

Links with the same name which serve the same equivalent purpose provide the following benefits to users:

• Enhanced usability: Users expect that links with the same label will lead them to the same or equivalent content.
• Less confusion: Users may encounter difficulties if identical link names lead to different destinations.
• Improved accessibility: Screen reader users rely on link names to understand their function. 

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)