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
, oraria-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.
<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.
<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.
<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.
<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
, oraria-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
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
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!