Once you start reviewing websites for web accessibility for a living, you start noticing inaccessible problems left and right.
As a visual user, some of these problems can only be confirmed by opening up dev tools and peaking at the HTML, such as alt text and aria-roles, while other accessibility problems are very clear to see with only a glance.
Link text is one of the latter.
The Makings of Accessible Link Text
Let’s consider the purpose and goal of link text:
“Meaningful links help users choose which links to follow without requiring complicated strategies to understand the page.”
W3 | Understanding Success Criterion 2.4.4: Link Purpose (In Context)
We want our users to feel confident as they navigate our products, and that confidence is affected by every link they come across.
Links with uninformative text can damage a user’s confidence by:
- Taking users to unexpected locations
- Starting unexpected downloads
- Requiring users to read the page or context of the paragraph to find their next click
On the flip side, links with meaningful text builds our users’ confidence by:
- Taking users to the locations they expected
- Starting downloads the users wanted
- Making it easy for users to find their next click by scanning
What Not to Do
If you’re trying to determine if your link text is meaningful or not, ask yourself this:
If all you had was the link text, without any context or other information from the page, would you be able to predict where that link would take you?
The answer to that would definitely be “no” if the link text is any of the following:
None of those texts gives you any sort of indication of where those links might take you.
(Spoiler alert: none of those links actually take you anywhere, so maybe they’re as informative as they really need to be…)
Link text such as a the following gives a little more information, but still requires some context to understand where it’s taking you:
We want our users to be able to skim our link texts and feel confident with where those links are taking them.
Writing Meaningful Link Text
While bad examples are easy to find, coming up with good link text can be a little trickier. Good link text is content-dependent, and therefore requires knowledge of the link destination and understanding of the context where the link is located.
Title of the Linked Page
A helpful default link text is just using the title of the page you’re linking to:
Sometimes this needs a little adjustment or additions to flow well in the context, or indicate if the link is going to a different website. The page may be titled “About Us,” but it might be a different “us” than where the user started, so “About Us” may not be a very helpful link text.
Linking to Documents
The same default strategy of using the title still applies here, but documents also need a little more information.
Documents often require specific programs to view or open, which can be an accessibility issue if that user requires additional assistance in navigating those documents ,or their device doesn’t have the program to view the document.
From a usability standpoint, it gives the users confidence to know they’re about to download document before they download the document. Unexpectedly opening a document can be a jarring experience.
Always indicate in the link text what type of document you’re linking, either within text or by using an icon. If you use an icon, make sure either the title or alt text attribute includes “opening an X document.”
In terms of the accessibility of each type of document, that’s a subject for a whole other blog post… if not multiple.
Linking to Emails
Similar to documents, “mailto:” email links open separate programs and take the user away from the browser. While in most cases this is a helpful feature, we still want to give the user as much information as possible in the link text.
The simplest strategy is to stick with the email itself as the link text. In addition to providing a very clear expectation, it also gives the user the option to copy-and-paste the email into their email program of choice:
Email bridget@bridget.bridget
If you would rather keep the @ signs out of the picture, just make sure to include the action of “email” in your link text:
Resources
There are so many additional aspects of link accessibility beyond the text itself. I hope you walk away from this post knowing a little more, as I often do when I dive deeper into a particular aspect of accessibility.
If you’d like to explore this topic more, here are some great resources to check out: