Skip to main content
No Result Found

link-purpose

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

Severity: Moderate

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.

Sample with an inadequate link text
Copy icon Copy
<p>Interest rates for fixed deposits have changed. <a href="https://www.w3.org/WAI/">Read more</a>.</p>

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.

Sample with a good link text
Copy icon Copy
<p>For more information on web accessibility, visit <a href="https://www.w3.org/WAI/">W3C Web Accessibility Initiative</a>.</p>

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.

Incorrect sample with bad aria-label
Copy icon Copy
<p>Interest rates for fixed deposits have changed. <a href="https://www.w3.org/WAI/" aria-label="Read more">Read more</a>.</p>

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.

Correct sample with good aria-label
Copy icon Copy
<p>For more information on web accessibility, <a href="https://www.w3.org/WAI/" aria-label="W3C Web Accessibility Initiative">click here</a>.</p>

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

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle