Website Accessibility Guide

Making Your HubSpot Website WCAG 2.1 Compliant

2.4.4 Link Purpose (In Context)

MCS Accessibility Team

MCS Accessibility Team
Last Updated November 09, 2019

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. All suggestions in this guide are in conjunction with the accessiBe solution and require an active license. For more information on the accessiBe platform and pricing, you can learn more here.

LEVELA
Success Criteria

2.4.4 Link Purpose (In Context)

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
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

  • This criteria is completely resolved with accessiBe or HubSpot.

 

Understanding 

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.

 

Examples and Tips 

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:

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>
  • 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 principles">
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.

 

 

How accessiBe Helps

Once the user turns on "accessibility mode," accessiBe automatically adds the necessary title tags, aria labels, and image alt tags to links for screen reader use. 

No action is required on your part to stay compliant, although it's always a great idea to double check your copy manually to make sure text is worded as clearly as possible.

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

"After extensive study, it was determined that..."

can be improved to read something like...

"After an extensive study by Kent State University on improving student learning practices, it was determined that..."

This provides far more context to the link and what the user will expect to see when they click the citation.

 

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


Download the WCAG 2.1 Compliance Checklist

What to expect if you download this checklist

Video: What to Expect If You Download this Checklist

Checklist Download

Questions?

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

Recent Morey Creative Studios Blog Articles