accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email

Back to the overview page

Link purpose

On this page:

• Summary
• Requirements
• Guidance for Design
• Guidance for iOS
• Guidance for Android
• Guidance for Flutter
• Guidance for Web
• More info

---

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.

---

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 Deque’s Web Accessibility Quick Checklist for Designers 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 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

• GOV.UK: Using links in content
• Writing good link text
• What is an accessible name?
• See the W3C’s detailed explanation of this guideline with techniques and examples.supporting-the-design-phase-with-accessibility-heuristics-evaluations/)

---

Guidance 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.

More guidance for iOS

• UILabel developer reference
• UITextView developer reference

---

Guidance for Android

This section needs more content. Contribute via Github or email.

---

Guidance for Flutter

This section needs more content. Contribute via Github or email.

---

Guidance for Web

• See also Guidance for Design section

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

• What is an accessible name?
• The Using aria-label for link purpose and Using aria-labelledby for link purpose techniques in the Web Content Accessibility Guidelines

---

More info

Sources

• W3C Web Content Accessibility Guidelines 2.1
• Government Digital Service WCAG 2.1 Primer
• Barclays’ Accessibility Design Standards
• The BBC’s Mobile Accessibility Guidelines

Contribute

This document is in beta. Help us by reporting issues via Github or email

This site is open source. Improve this page.