Link Purpose (In Context)

Who this affects

Screen reader users who pull up a list of all links on the page to navigate. A list of fifteen entries all reading "Read more" is useless.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

<h1>News</h1>

<!-- FAILURE 1: three identical "Read more" links. Pulled into a screen
     reader's link list they read: "Read more, Read more, Read more".
     They are also not disambiguated by any programmatic context - the
     headings are divs, so there is no list item, heading or paragraph
     relationship tying each link to its story. -->
<div>
  <div style="font-weight:700">Spring reading festival announced</div>
  <p>Three days of events across both shops.</p>
  <a href="#a">Read more</a>
</div>
<div>
  <div style="font-weight:700">Rare first editions arriving</div>
  <p>A private collection has come to us.</p>
  <a href="#b">Read more</a>
</div>

<!-- FAILURE 2: the link text is a bare URL. A screen reader reads it character
     by character: "h t t p colon slash slash..." -->
<p>Full programme: <a href="#c">https://example.org/events/spring/programme/2026</a></p>

<!-- FAILURE 3: "click here" carries no information at all, and the useful
     words sit outside the link where a link list cannot see them. -->
<p>To book a place, <a href="#d">click here</a>.</p>

<!-- FAILURE 4: an image link whose alt describes the picture rather than the
     destination. -->
<p><a href="#e"><img src="../../assets/media/book-cover.svg" alt="book cover" width="60" height="85"></a></p>

<p id="a">Story A.</p><p id="b">Story B.</p><p id="c">Programme.</p>
<p id="d">Booking.</p><p id="e">Tidal Flats.</p>

<h1>News</h1>

<!-- FIX 1: the whole headline is the link, so the link text alone says where
     it goes. This is almost always better than adding hidden text to a
     "Read more" - it gives every user a bigger target (2.5.8) as well. -->
<article>
  <h2><a href="#a">Spring reading festival announced</a></h2>
  <p>Three days of events across both shops.</p>
</article>
<article>
  <h2><a href="#b">Rare first editions arriving</a></h2>
  <p>A private collection has come to us.</p>
</article>

<!-- FIX 2: if a "Read more" pattern is required by the design, keep the
     visible text short and extend the accessible name with visually hidden
     text. The visible words must still be inside the accessible name, or you
     break 2.5.3 Label in Name for speech-input users. -->
<p>
  <a href="#a">Read more<span class="visually-hidden"> about the spring reading festival</span></a>
</p>

<!-- FIX 3: describe the destination instead of pasting the URL. -->
<p>Read the <a href="#c">full spring programme</a>.</p>

<!-- FIX 4: the link text says what will happen. -->
<p><a href="#d">Book a place at the festival</a></p>

<!-- FIX 5: for an image link, the alt text describes the DESTINATION, not the
     artwork - the image is standing in for the link text. -->
<p>
  <a href="#e"><img src="../../assets/media/book-cover.svg"
      alt="Tidal Flats by A. Marsh — read the review" width="60" height="85"></a>
</p>

<h2 id="a">Spring reading festival</h2><p>Story A.</p>
<h2 id="b">Rare first editions</h2><p>Story B.</p>
<h2 id="c">Full programme</h2><p>Programme.</p>
<h2 id="d">Booking</h2><p>Booking.</p>
<h2 id="e">Tidal Flats</h2><p>Review.</p>

How to test it

Extract every link's accessible name and read the list out of context. Ambiguous entries must at least be disambiguated by their sentence, list item, or table cell. Check that icon-only links have accessible names.

• Automated

  Empty links and links whose name is only an image filename are caught. Whether "Read more" is adequately disambiguated by context requires judgement.

  This demo's failure is not machine-detectable. Every link on the failing page has text, so axe's link-name rule is satisfied. Judging that three links reading "Read more" are ambiguous requires understanding the content. axe's identical-links-same-purpose rule is experimental and returns "needs review" at best.

  Relevant axe rules:

  • link-name
  • identical-links-same-purpose

• Keyboard

  Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

• Screen reader

  Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

• Visual

  Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

Related criteria

• 2.4.9 Link Purpose (Link Only) (Level AAA)
• 1.1.1 Non-text Content (Level A)
• 2.5.3 Label in Name (Level A)

In the specification

• Understanding 2.4.4 Link Purpose (In Context) — the W3C explanation, intent and exceptions
• 2.4.4 in the WCAG 2.2 Recommendation — the normative wording