2.4.4 Link Purpose (In Context)
A link’s destination should be clear from either the link text itself or the surrounding sentence context.
What is it?
This guideline aims to make website links clear and helpful for all users, especially those using assistive technology like screen readers. This typically means using descriptive link text that tells users where the link leads without needing extra explanation so that users can decide if they want to follow the link.
The only exception is for links where the purpose is intentionally hidden, like in a game where the mystery is part of the fun. In those cases, unclear link text is okay because it adds to the experience.
Why does it matter?
When links are unclear, users can feel frustrated because they don't know where the link will take them. This lack of clarity makes it harder for them to decide if they want to click on the link or not.
Imagine trying to navigate a website where every link just says "click here" or "read more" without any indication of what you'll find on the other side. It's like trying to choose a door without knowing what's behind it.
This uncertainty can make the browsing experience confusing and inefficient, especially for people using assistive technology who rely on clear link descriptions to understand the content of a webpage. Ultimately, unclear links disrupt the flow of navigation and can lead to users feeling discouraged or giving up on exploring the website altogether.
Who is affected?
People with limited mobility. People with cognitive disabilities. People with low or limited vision.
People with limited mobility can benefit from clear link descriptions by allowing them to skip links that they’re not interested in, saving them from unnecessary keystrokes from visiting irrelevant content. This makes navigation less physically demanding and more efficient.
People with cognitive disabilities may find unclear links and repetitive navigation options confusing. Clear links will make it easier to navigate without becoming disoriented or overwhelmed.
People with low or limited vision who rely on screen readers or other assistive technologies require that links be clear and descriptive. Otherwise, a lot of time is wasted trying to navigate solely based on the context around the links. Screen readers commonly present links in a list to users for navigation around the site, and unclear links make it impossible for the user to know where they need to go or where they’re going.
How to implement 2.4.4
Descriptive Link Text
The simplest way to give links a purpose is through the link text contained within the <a> element. The text should be distinguishable from the other links on the webpage and make it clear where the link leads or what it does.
<a href="<a href="https://en.wikipedia.org/wiki/Aardvark">https://en.wikipedia.org/wiki/Aardvark</a>
Descriptive Context Surrounding Links
Some exceptions to descriptive link text are for links found within:
- Headings
- Sentences
- Paragraphs
- List items
- Nested list items
- Table cells
The surrounding context should provide more information for an unclear link and should help users tell it apart from other links on the page. In each case, it’s important that the link or <a> element is enclosed with the <p>, <li>, or <td> elements that provide it with context.
It's most helpful if the extra information needed to understand the link comes before the link. If it comes after, it can confuse users who read the page from top to bottom.
Heading Examples
Links can be included within the heading itself, or they can derive purpose from a preceding headline too.
<h2><a href="aardvark-report.com">Overview of the AAArdvark species report </a>
<h2>Overview of the AAArdvark species report</h2>
<p>
<a href="aardvark-report.com/pdf">Read in PDF Format</a>
</p>
Sentence Examples
In this example, the standalone link is unclear as “click here”, however the adjacent text helps explain the link's purpose and what you’ll find if you click it.
<p>
<a href="aardvark-report.com"> click here.</a>
</p>
Paragraph Examples
In this example, the link is outside of the sentence, but this still meets the criteria because the link is within the wrapping paragraph or <p> element. And gives the user enough information to understand the purpose of the link.
<p>
Coming soon: The finals for the national corgi dancing competition.
<a href="dancing-corgi.com/finals">Read more</a>
</p>
List Item Example
Similarly, links contained with the list item or <li> elements can derive context from the information they’re listed with.
<ul>
<li>
<a href="aardvark-report.com">Aardvark Charity event</a>
</li>
</ul>
Nested List Item Example
Links within nested list items can also derive added context from the parent list item.
<ul>
<li><a href="<a href="https://en.wikipedia.org/wiki/Aardvark">https://en.wikipedia.org/wiki/Aardvark</a>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Aardvark#Habitat_and_range">Habitat and Range</a>
<li><a href="https://en.wikipedia.org/wiki/Aardvark#Conservation">Conservation</a>
</ul>
</ul>
Table Cell Example
Links within Table Cells can derive context from text within the same cell and the row or column headers.
<table>
<caption>Aardvarks tracked by the Aardvark Charity Commission</caption>
<tr>
<th>Country of Habitat</th>
<th>Kenya</th>
<th>Uganda</th>
</tr>
<tr>
<th scope="row">Number of Aardvarks Tracked Per Country</th>
<td><a href="<a href="http://aaardvark-report.com/kenya">aaardvark-report.com/kenya</a>
<td><a href="aaardvark-report.com/uganda">12</a>
</tr>
</table>
Links with Graphics or Images
If the link is solely graphical, for example, the only content within the <a> element is an image, then the alt attribute needs to be included to help describe the link.
<a href="<a href="https://en.wikipedia.org/wiki/Aardvark">https://en.wikipedia.org/wiki/Aardvark</a>
<img src="aardvark_animal_icon.png" alt="Aardvark Wikipedia Article"></a>
However, if you include descriptive text within the <a> element to go alongside your graphic, and any added descriptions would be repetitive, then you can leave the alt attribute empty.
<a href="<a href="https://en.wikipedia.org/wiki/Aardvark">https://en.wikipedia.org/wiki/Aardvark</a>
<img src="aardvark_animal_icon.png" alt="">Aardvark Wikipedia Article</a>
Adjacent Linked Images and Text With the Same Destination
In an effort to reduce redundant links that point to the same destination or resource, it’s important to review linked images that are adjacent to linked text. This layout is pretty common across the web; for example, blog listings or product listings with a featured image next to a linked title where both point to the same page.
In these cases, you’ll need to make sure your HTML is set up in a way so that the image or <img> element is contained within the <a> tag element. Once the image is contained, you can also apply alt text to the image if it describes the image or adds context to the link.
This makes it easier for screen readers to navigate the page since it does not contain duplicate links to the same resource and doesn’t have to read aloud duplicate information.
Do:
<a href="</em><a href="https://dog.com/dancing-shoes"><em>https://dog.com/dancing-shoes</em>
<em>"></em>
<em><img alt="Dog wearing dancing shoes with the text 'Buy Now' below" src="dancing_dog.png"></em>
<em>Buy Doggy Dancing Shoes Today!</em>
<em></a>
Don’t:
<a href="</em><a href="https://dog.com/dancing-shoes"><em>https://dog.com/dancing-shoes</em>
<em>"></em>
<em><img alt="Dog wearing dancing shoes with text 'Buy Now' below" src="dancing_dog.png"</em>
<em></a>
<em><a href="</em>
<a href="https://dog.com/dancing-shoes"><em>https://dog.com/dancing-shoes</em>
<em>"></em>
<em>Buy Doggy Dancing Shoes Today!</em>
<em></a>
CSS to Hide Descriptive Text
Another approach involves adding descriptive text to a link and using CSS to hide the extra text from being displayed. If done correctly, the text is still accessible to screen readers while allowing the visual design to not get too cluttered.
CSS techniques using visibility: hidden or display: none would hide the text from screen readers. A better approach would be to place the descriptive text in a 1-pixel container with overflow: hidden, so it's not visible on screen but can be read by screen readers.
.visually-hidden {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
<a href="<a href="https://en.wikipedia.org/wiki/Aardvark">https://en.wikipedia.org/wiki/Aardvark</a>
<span class="visually-hidden">Aardvark Wikipedia Article</span>
Image Maps
Image Maps are special types of images that include selectable regions within them that count as links. Alongside the image’s overall alt text description, each area must also provide its own alt attribute to describe its purpose.
aria-label and aria-labelledby
It’s worth noting that the best way to handle link purpose accessibility is through the methods listed above; however, if you must use custom interactive elements, ARIA can help ensure your links still have context.
The aria-label attribute adds a text label to a link when there is otherwise no visible text describing it. If there are visible descriptive elements, the aria-labelledby attribute should be used instead.
aria-labelledby attribute
Links can derive their meaning from adjacent visible text elements on the page and use the aria-labelledby attribute to make the connection. Any associated label text is announced to represent the link instead of the embedded link text.
In the following example, the link will be announced as “Aardvark Wikipedia Article” based on the heading instead of “Continue Reading….” which is included in the link markup.
<h2 id="aardvark-wiki-page">Aardvark Wikipedia Article</h2>
<a
id="aardvark-wiki-link"
aria-labelledby="aardvark-wiki-page aardvark-wiki-link"
<a href="https://en.wikipedia.org/wiki/Aardvark">https://en.wikipedia.org/wiki/Aardvark</a>
Continue Reading…
</a>
aria-label attribute
However, if no visible descriptive text elements on the page can be used to represent the link, then the link can use the aria-label attribute.
In this example, the link is announced as ”Continue reading about Aardvark habitats and food sources.” based on the aria-label found within the link or <a> element.
<img alt="Aardvark in its wild habitat eating from an ant pile" src="aardvark.png">
<a
aria-label="Continue reading about Aardvarks and their habitats and food sources."
<a href="https://en.wikipedia.org/wiki/Aardvark">https://en.wikipedia.org/wiki/Aardvark</a>
Continue Reading…
</a>
Conclusion
Following WCAG 2.4.4 makes sure website links are clear and easy to understand, especially for people using assistive technology. Descriptive link text or context helps users know where a link will take them, making navigation simpler and more efficient.
