WCAG 2.4.4 — Ambiguous Link Text

Who Is Affected

Screen reader users who navigate by listing all links on a page, keyboard-only users who tab through links, users with cognitive disabilities who benefit from clear navigation cues, and search engines that use link text to understand page relationships.

What This Means

Every link must have text that describes where it goes or what it does, either from the link text alone or from its immediate surrounding context. When a screen reader user pulls up a list of links, each link should make sense on its own.

Fails: "Click here," "Read more," "Learn more," "More info," "Here," "Link" Passes: "Download the 2025 budget report (PDF)," "Read the full meeting minutes," "Contact the Parks Department"

Fix: Content Editor

This is almost always a content editing issue — someone wrote "click here" or "read more" in the page body.

1. Open the page in your content editor.

2. Find the vague link text that was flagged.

3. Rewrite the link to describe the destination:

   Before:

   To view the agenda, click here.

   After:

   View the March 2025 Council meeting agenda.

4. If you must keep short link text for design reasons, add a visually hidden description using aria-label:

   <a href="/agenda.pdf" aria-label="Download March 2025 Council meeting agenda">
     Download agenda
   </a>
   

5. Save the page and re-run a OctoComply scan to verify.

Common patterns to fix: | Before | After | |--------|-------| | For more information, [click here]. | [Learn about our recycling program]. | | [Read more] | [Read the full park closure announcement] | | Download [here] | [Download the permit application (PDF, 2MB)] |

Fix: CMS / Theme

If the vague link text comes from a theme component (e.g., blog post cards that auto-generate "Read more" links):

1. Locate the template file that generates the link.
2. Change the link text to include the post title:

   <!-- Before -->
   <a href="{{ post.url }}">Read more</a>
   
   <!-- After -->
   <a href="{{ post.url }}">Read more about {{ post.title }}</a>
   

3. Alternatively, add aria-label with the full context:

   <a href="{{ post.url }}" aria-label="Read more about {{ post.title }}">Read more</a>
   

Standard Reference

WCAG 2.1 Success Criterion 2.4.4 — Link Purpose (In Context), Level A

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context.

• W3C Understanding SC 2.4.4
• WCAG Technique H30 — Descriptive link text
• WCAG Technique G91 — Link text describes purpose
• WCAG Failure F63 — Using link text that does not describe the purpose