Link context

Link context is the HTML element that surrounds a link and makes its destination clear when the link text alone is insufficient. A paragraph, list item, table cell, or section heading can serve as context, provided that assistive technologies can read them.

Five "Learn more" links on the same page. For a sighted user, no problem: each link is visually close to its subject. A screen reader user who displays the list of links sees five identical link texts, with no indication of destination.

#What WCAG means by "context"

WCAG criterion 2.4.4 (Level A) sets a simple rule: the destination of each link must be understandable from its text alone, or from its text combined with a context that is programmatically determinable. RGAA restates this requirement in criterion 6.1.

This programmatic context is the HTML element that surrounds the link and that assistive technologies know how to interpret:

• the sentence or paragraph (<p>)
• the list item (<li>), not the entire list
• the table cell (<td>) or its header (<th>)
• the section heading (<h2>, <h3>…) that precedes the link

<!-- The context makes the link understandable -->
<article>
  <h3>Pro Plan, €49/month</h3>
  <p>Unlimited access to automated audits.
    <a href="/pricing/pro">Learn more</a>
  </p>
</article>

The screen reader can convey "Learn more, Pro Plan, €49/month". The link becomes explicit without changing its visible text.

#Three mistakes everyone makes

Relying on title. Many developers add a title attribute to the link to compensate for vague link text. Screen readers ignore the title attribute in default configuration. Keyboard and mobile users never see it.

Confusing visual proximity with HTML context. An image placed next to a link provides no context if it is not within the same containing element. Assistive technologies do not guess spatial relationships. They read the DOM.

Putting the link and its context in different <li> elements. A W3C clarification confirms it: the programmatic context is the <li> that contains the link, not the entire <ul>. Text in one <li> and a link in the next <li> share no context.

When no parent HTML element provides sufficient context, aria-label remains an option:

<a href="/pricing/pro" aria-label="Pro Plan pricing">Learn more</a>

aria-label replaces the visible link text for screen readers. It is a technique recognized by the W3C, not a first choice: explicit link text in the link itself is always preferable.

#In summary

A link does not need lengthy text to be accessible. It needs HTML context that assistive technologies can read: a paragraph, list item, table cell, or section heading. List your links outside their visual context. If five of them say the same thing, programmatic context is missing.