2.4.4 Link Purpose (In Context): 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, except where the purpose of the link would be ambiguous to users in general. (Level A)

Requirements

• Links should clearly describe the content that they load by their text alone. All links should clearly describe the content that they load by their text alone, even when taken out of the context they’re in on the page. For example:
  • The link HolisticA11Y’s Digital Accessibility Checklist and Cheat Sheets indicates its purpose by its text alone because it is the unique name of the content it points to. There should be no generic links such as “click here” and “read more”.
• If the use of generic links really can’t be avoided, information on the destination content should be included in the link’s ‘Accessible Name’. You can do this by adding visually hidden text to the link’s label, or by setting the ‘Accessible Name’ directly in code. For example, “about credit cards” could be added to the end of a “read more” link as hidden text.
• If that’s still not possible, make sure that at least the link text clearly describes the content that it loads when it’s taken in the context of other content that it’s associated with – provided that the association is one that screen readers understand. For example: A link named ‘Email’ in an HTML table cell, where the cell’s row header contains the name of the person; A link named ‘Order’ in a HTML list item, where the name of the product is also included in the list item; A link named ‘See invoice’ that is programmatically associated with the name of an item (using aria-describedby for the Web for example).

Why is it important?

This ensures that screen reader users can understand the purpose of links without reading nearby content, and that speech recognition users can target links accurately using voice commands.
Unique links and navigation items are essential for screen reader and magnification users who may not perceive the context of a link or item. This is especially an issue for users who have not followed the content order.

Summary

Make sure the purpose of every link is clear from the link text alone, or together with associated content (if screen readers recognise the association).
The purpose of every link must be clear from its link text, or its link text plus associated content if assistive technologies recognise the association.

Common mistakes

• A link has text that does not indicate its purpose (for example ‘Click here’);
• A link points to the same destination as another link, but uses different link text;
• A link points to a unique destination, but uses the same text as other links;
• A link has text that depends on nearby content to be understood, but that association is not automatically identified by assistive technologies;
• The doesn’t have a name that’s available to assistive technologies (like a link that’s an image without text nor an alt attribute).

Design Guide

• When using an icon to indicate a link, indicate the accessible name for that image (aka ‘alt text’) on your designs
• The alternative name for an icon that indicates a link should describe the purpose or destination of the link, rather than what the icon looks like
• If you design has links that don’t indicate their purpose with their text alone, ensure that either:
  • Your designs also indicate a slightly longer name for that link, inclusing text that should be hidden visually but available to screen reader users
  • The purpose of the link is clear from its context, and that relation is one that screen readers recognise (such as a a list or a table in HTML)

Link Purpose Examples for IOS

Adding a hint to a link

label.isAccessibilityElement = true
label.accessibilityTraits = [.link]
label.accessibilityHint = "Select to be taken to example.com"

NOTE: Links detected in UITextViews cannot be given a hint so copy will have to be crafted in a way that their purposes are clear in the context in which they are discovered.

Link Purpose Examples for Web

Using visually hidden text to extend a link’s accessibile name

If a link text taken on its own is ambiguous (for example if multiple links on a page have the same visible text but point to different destinations), you can add visually hidden text to the link to make it clear and unique. You can use a .visually-hidden CSS class to extend a link’s name without lengthening its visible name.

Example:

<style>
.visually-hidden {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
</style>
...

<h2>Our products</h2>

<h3>Our credit cards</h3>
<p>
    <!-- Some content about credit cards -->
    <a href="page1.html">Lean more <span class="visually-hidden">about our credit cards</span></a>
</p>

<h3>Our loans</h3>
<p>
    <!-- Some content about loans -->
    <a href="page2.html">Learn more <span class="visually-hidden">about our loans</span></a>
</p>

<h3>Our mortgages</h3>
<p>
    <!-- Some content about mortgages -->  
    <a href="page3.html">Learn more <span class="visually-hidden">about our mortgages</span></a>
</p>

Failure example:

<h2>Our products</h2>

<!-- Some content about credit cards -->
<a href="page1.html">Lean more</a>


<!-- Some content about loans -->
<a href="page2.html">Learn more</a>

<!-- Some content about mortgages -->  
<a href="page3.html">Learn more</a>

References

1. GOV.UK: Using links in content
2. What is an accessible name?
3. W3C’s detailed explanation with techniques and examples
4. UILabel developer reference
5. UITextView developer reference
6. What is an accessible name?
7. The Using aria-label for link purpose and Using aria-labelledby for link purpose techniques in the Web Content Accessibility Guidelines
8. Accessibility Guidelines- Github.io