First Steps to an Accessible Website (Part 5)

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.

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):

Get your copy of War and Peace by Leo Tolstoy. (HTML, PDF, and MP3).

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.

Symantec Context

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 a 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 left 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.

Risk Management

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!