Website Accessibility Guide

2.4.4 Link Purpose (In Context)

Written by MCS Accessibility Team | May 30, 2020 10:48:00 PM

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.