This document is in beta. Help us by reporting issues via Github or email.
Back to the overview page
Link purpose
The purpose of every link must be clear from the link text alone. Or together with associated text (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.
On this page:
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:
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 programatically associated with the name of an item (using
aria-describedby for the Web for example).
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).
Why?
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.
Official wording in the Web Content Accessibility Guidelines
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)
See the W3C’s detailed explanation of this guideline with techniques and examples.
Guidance for Design
- 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)
More guidance for design
Guidance for Web
Using visually hidden text to extend an link’s accessible 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>
Common mistakes
- The link doesn’t have a name that’s available to assistive technologies, for example:
- A link that’s an image without text nor an alt attribute
- A link that’s a CSS background image, and has no visible accessible name
More guidance for the Web
More info
Sources
Contribute
This document is in beta. Help us by reporting issues via Github or email.