Introduction

Link Purpose Explained

4 min read
View contents

Link Purpose: Creating Meaningful and Descriptive Links

Introduction

Link purpose describes where a link leads and what happens when users click it. WCAG 2.4.4 (Link Purpose - In Context) requires that link purpose can be determined from the link text itself or from the surrounding context. This is a Level A requirement, making it fundamental to web accessibility.

For screen reader users who navigate by links, vague link text like “click here” or “read more” provides no useful information. When all links say the same thing, users cannot distinguish between them without navigating back to surrounding content.

The Basic Concept

Link purpose means the destination or action a link performs is clear to users:

<!-- Good: Purpose clear from link text -->
<a href="/pricing">View our pricing plans</a>

<!-- Poor: Purpose unclear without context -->
<a href="/pricing">Click here</a>

When links are clear, users can:

  • Quickly scan available navigation options
  • Decide whether to follow a link
  • Navigate efficiently using assistive technology
  • Understand links out of context (in link lists)

Who Benefits

User Type Benefit
Screen reader users Can navigate by links and understand destinations
Cognitive disabilities Clearer navigation reduces mental effort
Keyboard users Can make informed decisions about link navigation
All users Faster scanning and decision-making

WCAG Requirements

2.4.4 Link Purpose (In Context) - Level A

The purpose of each link can be determined from:

  • The link text alone, OR
  • The link text together with its programmatically determined link context

Programmatic context includes:

  • Text in the same sentence, paragraph, or list item
  • Text in the parent table cell or header
  • Text in ARIA-labelled regions
<!-- Purpose from link text alone -->
<a href="/report.pdf">Download Annual Report 2024 (PDF)</a>

<!-- Purpose from context -->
<p>
  Learn more about our services on the
  <a href="/services">services page</a>.
</p>

2.4.9 Link Purpose (Link Only) - Level AAA

For enhanced accessibility, link purpose should be clear from the link text alone:

<!-- Level AAA: Self-descriptive links -->
<a href="/contact">Contact our sales team</a>
<a href="/docs">View API documentation</a>
<a href="/blog/seo-tips">Read: 10 SEO Tips for 2024</a>

Why Level A vs AAA?

Level A (2.4.4) accepts contextual links because:

  • Many design patterns rely on context (cards, tables)
  • Strict link-only requirements may be impractical
  • Context is still accessible to assistive technology

Level AAA (2.4.9) is stricter because:

  • Self-descriptive links work in any context
  • Better for link lists and navigation menus
  • Optimal user experience for all users
<!-- BAD: Generic, meaningless text -->
<p>To download the report, <a href="/report.pdf">click here</a>.</p>

<!-- GOOD: Descriptive link text -->
<p><a href="/report.pdf">Download the annual report (PDF, 2MB)</a></p>

<!-- BAD: Multiple identical links -->
<article>
  <h2>Product A</h2>
  <p>Description...</p>
  <a href="/products/a">Read more</a>
</article>
<article>
  <h2>Product B</h2>
  <p>Description...</p>
  <a href="/products/b">Read more</a>
</article>

<!-- GOOD: Unique, descriptive links -->
<article>
  <h2>Product A</h2>
  <p>Description...</p>
  <a href="/products/a">Learn more about Product A</a>
</article>

3. URLs as Link Text

<!-- BAD: Raw URL as link text -->
<a href="https://example.com/path/to/page">https://example.com/path/to/page</a>

<!-- GOOD: Descriptive text with URL shown -->
<a href="https://example.com/path/to/page">Visit our resources page</a>

<!-- BAD: Link with no text -->
<a href="/search"><svg aria-hidden="true"><!-- icon --></svg></a>

<!-- GOOD: Accessible label provided -->
<a href="/search" aria-label="Search">
  <svg aria-hidden="true"><!-- icon --></svg>
</a>

How to Write Good Link Text

Best Practices

Do Don’t
Describe the destination Use “click here” or “here”
Be specific and unique Use identical text for different links
Include file format if applicable Leave users guessing about downloads
Front-load important words Bury the meaning at the end
Keep links concise but clear Write entire paragraphs as links

Link Text Patterns

Navigation Links:

<nav>
  <a href="/">Home</a>
  <a href="/about">About Us</a>
  <a href="/services">Our Services</a>
  <a href="/contact">Contact</a>
</nav>

Action Links:

<a href="/subscribe">Subscribe to newsletter</a>
<a href="/demo">Request a demo</a>
<a href="/download">Download free trial</a>

Document Links:

<a href="/annual-report-2024.pdf">
  Annual Report 2024 (PDF, 2.5MB)
</a>

External Links:

<a href="https://example.org" rel="external">
  Visit Example Organization (opens external site)
</a>

Using aria-label for Context

When visual design requires short link text, use aria-label for screen readers:

<!-- Card design with "Read more" visible -->
<article>
  <h3>Understanding Accessibility</h3>
  <p>Accessibility ensures everyone can use your website...</p>
  <a href="/blog/accessibility" aria-label="Read more about Understanding Accessibility">
    Read more
  </a>
</article>

Important: aria-label completely replaces the visible link text for screen readers, so it must be complete and descriptive.

Quick Manual Test

  1. List all links on the page
  2. Read each link text in isolation
  3. Can you determine where each link goes?
  4. Are any links ambiguous or identical?

What to Verify

  • [ ] Every link has descriptive text or accessible name
  • [ ] No “click here” or “here” links
  • [ ] “Read more” links have unique accessible labels
  • [ ] Icon-only links have aria-label or visually hidden text
  • [ ] Link purpose is clear from text or immediate context

Tools for Testing

  • Screen reader - Navigate by links only
  • axe DevTools - Detects empty or generic links
  • WAVE - Highlights link text issues
  • Keyboard - Tab through links and verify purpose

References

  1. W3C - WCAG 2.2 SC 2.4.4 Link Purpose (In Context)
  2. W3C - WCAG 2.2 SC 2.4.9 Link Purpose (Link Only)
  3. WebAIM - Links and Hypertext
  4. Deque University - Link Name Guidelines

Related articles

Related version

Detailed guide

Link Purpose Implementation Guide

Creating accessible links goes beyond simply avoiding "click here." This guide covers comprehensive patterns for implementing link purpose across different...

Category hub

Hub

Wcag Compliance Hub

Web accessibility ensures that websites and applications can be used by everyone, including people with disabilities