2.4.4 Link Purpose (In Context)

MCS Accessibility Team

MCS Accessibility Team
Last Updated July 23, 2020

The following directions are part of a full step-by-step guide to making a HubSpot website WCAG 2.1 AA compliant. These recommendations are intended for websites managed on the HubSpot CMS but can be adapted for other content management systems.

LEVELA
Principle: Operable
User interface components and navigation must be operable.
Guideline: Navigable
Provide ways to help users navigate, find content, and determine where they are.

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.

View Official WCAG 2.1 Compliance Techniques

Understanding 2.4.4 Link Purpose (In Context)

Links should provide a clear description to where they go. Make sure your link text is actually descriptive of where the link is taking the user, or include a title attribute on the link if the text is unclear.

In general, avoid vague link text such as "Learn More", "Go", and "Start" unless they are positioned at the end of a paragraph or sentence that would provide clear context for the user. If there are multiple uses of the same link text on a page, they must link to the same destination, unless you use an aria label to differentiate them.

When the link is wrapped around an image, alt text must be provided (and should already be present!)

Clear, descriptive links. It’s that simple to stay ADA-compliant, and it's also a great practice for usability in general.

Recommended Solutions

For the best possible user experience, links and the text surrounding them should be descriptive and specific.

  • Example 1:
    "Contact us today to find out how we can help."

    The purpose and the destination is clear to the user by just the link text alone.

  • Example 2:
    <p>Our agency cares about our clients and each other. <a href="https://www.moreycreative.com/culture" title="Read the Morey Creative Culture Code"> It's key to who we are. </a><p>


    Even though "It's who we are" is a little vague by itself, it becomes clear thanks to the context of the rest of the sentence or paragraph. This example uses a title tag as an extra fallback, so the user understands exactly where the link will direct them.

  • Example 3:
    <p> Morey Creative Studios is a Diamond Certified HubSpot Partner. <a href="/morey" aria-label="Read more about Morey Creative"> Read More... </a> </p>

    <p> The inbound methodology is composed of three stages: attract, engage and delight. <a href="/inbound" aria-label="Read more about inbound marketing"> Read more... </a> </p>

    Here, an aria label helps differentiate between the two instances of the "Read More" link, so it's extra clear to the user that the link redirects to the respective articles.

For more information, please visit the official W3C article: Understanding 2.4.4 Link Purpose (In Context)


Questions?

Let us know if we can help you address this specific WCAG Recommendation.