WCAG (Level A) SC 2.4.4 Link Purpose (In Context) (W3.org)
Issue description
WCAG 2.4.4, “Link Purpose (In Context)” focuses on making the purpose of links clear and understandable from the link text alone or from the link text together with its surrounding context. This is crucial for all users, but especially for people who rely on assistive technologies like screen readers. Many websites use vague or misleading link text that doesn’t provide sufficient information about the link’s destination. For example:
- “Click here” or “Read more”: These generic phrases don’t tell the user anything about where the link will lead.
- Ambiguous links: Links with text like “Learn more” or “Download” can be ambiguous if the surrounding context doesn’t clarify what they refer to.
- Misleading links: Link text that doesn’t accurately reflect the destination can mislead users and cause confusion.
Why link purpose matters
- Informed decisions: Users need to understand the purpose of a link before clicking on it to make informed decisions about where they want to go.
- Efficiency: Clear link text allows users to quickly scan a page and find the links that are relevant to them.
- Accessibility: Users of assistive technologies, like screen readers, often navigate by link text. Vague links can make it difficult for them to understand the context and purpose of the links.
- Usability: Clear and informative link text improves the overall usability of the website for everyone.
Essentially, WCAG (Level A) SC 2.4.4 Link Purpose (In Context) ensures that the purpose of each link is clear from its text and context, allowing users to understand where the link will take them or what action it will perform. This helps users navigate the website effectively and make informed choices about their interactions.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 2.4.4, “Link Purpose (In Context)” involves ensuring that the purpose of each link is clear from its link text and the surrounding context. Here’s how:
Use descriptive link text
- Clear and concise: Use link text that clearly and concisely describes the link’s destination or purpose.
- Avoid vague phrases: Don’t use generic phrases like “click here,” “read more,” “learn more,” or “download” without further context.
- Front-load important keywords: Place the most important keywords at the beginning of the link text.
Provide context
- Surrounding content: Ensure the surrounding text provides context for the link’s purpose if the link text alone isn’t sufficient.
- List items: If the link is part of a list, ensure the list item provides context for the link.
- Heading proximity: Place links near relevant headings to provide additional context.
Use ARIA attributes (when necessary)
aria-label: For situations where it’s difficult to change the link text itself, use the aria-label attribute to provide a more descriptive label for screen readers. Example:<a href="#" aria-label="Learn more about our accessibility services">Learn more</a>
Visual presentation
- Distinguish links: Visually distinguish links from surrounding text using color, underlining, or other visual cues.
- Consistent styling: Use consistent styling for links throughout the website.
Testing
- Screen reader testing: Test your website with a screen reader to ensure that the link text and context are clear and understandable.
- Cognitive walkthrough: Conduct a cognitive walkthrough to evaluate the clarity and understandability of link text from a user’s perspective.
Examples
- Instead of: “Click here to learn more about our services.”
Use: “Learn more about our services.” - Instead of: “Download the brochure.” (with no context)
Use: “Download the brochure about our new products.” - Instead of: “Read more” (at the end of a paragraph about a specific product)
Use: “Read more about the Acme Widget.”
By following these practices, you can create clear and informative links that improve the user experience for everyone, including those who rely on assistive technologies.
