link-purpose

Ensures that users understand what a link is about without navigating to the link.

Description

Hyperlink texts should be named such that users understand what the link is about without clicking the link. Link texts like “read more”, “click here”, and “learn more” do not provide enough information about the content present in the target location. Instead of using such generic link texts, consider using meaningful texts that include the name of the web application, article, or document where the link redirects.

If you have link texts like “read more” or “learn more”, you can make them accessible by adding an aria-label, aria-labelledby, or aria-describedby attribute with a descriptive text. Alternatively, you can use a better link title.

You can also make a link accessible by adding more information in the preceding line (before a full stop or comma) of the link text by using descriptive sentences.

Success criteria

For this accessibility check to pass, your link texts should meet one of the following criteria:

• The link text is not phrases/words like “Learn more”, “Read more”, “Click here”, etc.
• If the link does not describe the context in the aria-label, aria-labelledby, or aria-describedby attributes.

Example

The following link definition uses “Read more” as the link text. It doesn’t convey any information on what the link is about. Such link texts break the link-purpose rule.

In contrast, the following example uses a meaningful text (W3C Web Accessibility Initiative) as the link text. This is accessible as the link text actively conveys what the link is about. Hence, this code snippet doesn’t break the link-purpose rule.

Consider the following example in which the aria-label attribute is used. However, the aria-label attribute is “Read more”, which doesn’t convey useful information. Such aria-label, aria-labelledby, or aria-describedby attributes do not solve the problem. Hence, such links also break the link-purpose rule.

In contrast, the following code snippet uses the aria-label “W3C Web Accessibility Initiative”. This descriptive aria-label makes the link accessible. Hence, this link does not break the link-purpose rule.

These examples are only for demonstration and may not present an optimal HTML implementation.

How to fix?

Follow these methods to fix this issue:

• Use descriptive link texts that clarify what the link is about.
• If the link text doesn’t have useful information, add an aria-label, aria-labelledby, or aria-describedby attribute with meaningful information about the content in the link.

Reference

• WCAG 2.4.4: Link Purpose
• Technique G53: Using the enclosing sentence
• Technique ARIA8
• Technique H78: Using the enclosing paragraph
• Failure of Success Criterion 2.4.4: link context elsewhere