Descriptive Link Text
This is Part 5 of our “First Steps to An Accessible Website” blog series! In this post we are going to review how to describe the purpose of a link using its link text and its surrounding context.
Using descriptive link text helps all users understand the purpose of the link. For link text to conform with WCAG 2.1 Level A, providing link text that conveys the link purpose in context is all that is needed. This is what Success Criterion (SC) 2.4.4 Link Purpose (In Context) is all about. A similar WCAG criterion is SC 2.4.9. This criterion requires that the link purpose be understood using the link only (i.e., the link text only), but this is not required to meet WCAG Level A conformance as SC 2.4.9 is a Level AAA criterion.
Link Purpose (In Context)
Conveying link purpose (in context) is a simple concept. It means that a user can discern the purpose of the link from the link text alone or the link text and its surrounding words or content. This is something that comes second nature when visually looking at the link on the page… in context. For non-visual users, they can also discern the purpose of the link by using a screen reader or a Braille display to understand the purpose via the link text and its context.
Here is an example of a providing link purpose in context. Note: the link doesn't go anywhere, it is just for the example. (Example 1):
Get your copy of War and Peace by Leo Tolstoy.
In example 1, the link purpose is easily understandable using the link text “War and Peace” along with its preceding context of “get your copy of”.
Here is another example using three links. Note: the links do not go anywhere, they are just for the example. (Example 2):
In example 2, you can see that there are three formats you can choose. Just as before, the preceding context would allow the user to understand that selecting a link would allow them to access the book format of choice. For example, selecting the HTML link, the user knows they would be getting a copy of War and Peace in HTML.
You may have noticed that in both the previous examples the context which helped to describe the link purpose came before the link itself. This would be a best practice because the context will be most usable if it precedes the link.
Here is a third example:
In the image above, we have three different subscriptions available for a product called “Business Success”. Each subscription has a “subscribe” link. When reviewed in context, the purpose of each of the three “subscribe” links are visually understandable. Depending on how the page is coded, the link’s purpose may or may not be understood by users of assistive technology.
The layout of content in example 3 could be structured several different ways. We will highlight just a couple to help demonstrate that how content is coded at the page source can impact the ability of a user to understand the link purpose in context.
Here is an example of three links that all have the same text, "Subscribe". (Example 3a):
In the previous example 3a, the purpose of each link named "Subscribe" can be determined visually and via a screen reader. This is because each panel's content is has an heading level 2 tag
<h2> and is wrapped within a paragraph tag
<p> that also contains the link itself. This allows all users to be able to understand the link purpose in context.
Here is an example that follows the same visual layout as in example 3a with three links that all have the same text, "Subscribe". But this time the underlying source code is different. (Example 3b):
In the previous example 3b, the purpose of each link named "Subscribe" can be determined visually, but a screen reader would not be able to easily determine the link purpose of the "Subscribe" links. This is because the panel layout is now using a table layout with the related content of each link (it's context) in a different table row
<tr> and a different table data cell
<td>. Tables are read by screen readers starting at the top row from let to right for each data cell. Once the end of the row is reached, it starts at the next row and reads from left to right for each data cell. This means each subscription plan's details would be read first, then each "Subscribe" link would be read one after the other, effectively removing each link from its context.
It is important to be sure that the link purpose is understandable in context visually as well as understandable in context at the page source level. This can be achieved by putting the description of the link in the same sentence, paragraph, list item, or table cell as the link, because these are directly associated with the link itself.
Alternatively, ARIA techniques such as
aria-describedby, can be used to associate additional text on the page with the link.
As based on our discussion so far, we know that the purpose of a link that uses link text such as “click here”, “more info”, and “learn more” can be understandable and WCAG Level A compliant. Yet many accessibility scanning tools will flag these and similar link text as a failure or a warning. This is because scanning tools cannot determine if the purpose of the link makes sense “in context” and using these types of terms are not considered a good user experience.
To help users of these tools ensure the purpose of the link is understood and compliant, links with these common terms are flagged to force the user to manually review the links. Which is a good thing but there is a drawback in using that link text.
The professional plaintiffs that have been jumping on the inaccessible website lawsuit bandwagon also use accessibility scanners to qualify sites to send their demands. Which means if you are using link text that causes failures or warnings when scanned, you should consider using different link text that does not cause a scanning tool to alert the user to a potential issue. This will help reduce your risk of being targeted by these drive-by accessibility legal complaints!
Providing the link purpose in context is not difficult if you:
- Take steps to describe the purpose of the link using either the link text alone, or in combination with the context the link appears.
- Ensure the link purpose is understandable at the page source level and not just visually.
- Avoid using link text such as “click here” that can be used by professional plaintiffs to justify their claiming your site is inaccessible.
We hope this discussion helps clarify how to ensure your link purpose is understandable to all and that you can conform to WCAG 2.1 Level A when it comes to SC 2.4.4 Link Purpose (In Context).
If you have not yet reviewed parts 1-4 of this series, please feel free to do so.
- In Part 1 we discussed having an Accessibility Statement on your website.
- In Part 2 we covered making sure that images on your website have an appropriate ALT attribute.
- In Part 3 we introduced the often-overlooked LANG attribute and why it matters.
- In Part 4 we reviewed H tags (aka heading tags), why they are important, and their proper use.
If you are looking to add understanding and clarity to your web accessibility efforts, consider using WebAlign. With your WebAlign subscription you have access to guidance for your designers, developers, and QA/Test teams on how to incorporate, code, and verify accessibility on your sites. You also have weekly access to our live Zoom calls where you can discuss accessibility topics with our experienced accessibility professionals. And there is our WebAlign community user forum to post questions and bounce ideas off other WebAlign users who may have already dealt with issues you are currently facing.
For less than what most spend on coffee at their favorite coffee shop each week, you can have access to the most up to date accessibility compliance resource available today.
To find out more about how WebAlign can help you and your team successfully design, create, and maintain accessible web content, please visit our What is WebAlign page.
Want to See More Content Like This?
Want the latest blog posts, videos, white papers, and announcements? Sign up for our mailing list and stay in the loop!
We're Here to Help When You're Ready
Take a deep breath. Then feel free to reach out to our team when you're ready to discuss your accessibility needs.