Written by Adam Kosakowski, M.Ed., ATP, New England Assistive Technology (NEAT) Center
Links are everywhere and are used in every type of digital content. As such, making links accessible is incredibly important. But, how to do so is not common knowledge, and there are many wrong ways to do it that will make the experience worse for people using assistive technology. Thankfully, doing it right is fairly easy once you know how.
Proper Link Text
The worst way to provide a link is to copy and paste the URL into your writing. Imagine a screen reader reading an amazon link with countless numbers, special symbols, and slashes; it does not make an accessible reading experience. Instead, create proper link text. To do this in Microsoft Word or Outlook, do the following:
- Put your text cursor where you want the link and right click.
- Choose Link to open the Insert Hyperlink window.
- In the “Address” field, paste that URL.
- In the “Text to display” field, type in a few words to describe the purpose of the link. Do not put the URL here.
- Click OK.
The result is a link that looks like this, Candy on Amazon, rather than a garbled mess that any one wouldn’t enjoy reading let alone people using assistive technology.
Best Practices using Proper Link Text
Like Alternative Text (see my previous column), proper link text is easy to learn but a bit tricky to master because of the question, “What should I use as the link text? The general idea is that link text should be concise and describe where the link will bring the user. Here are some best practices and things to avoid:
- Avoid “Click here”, “Read more”, “link to [some link description]”, etc.
- Reason: Screen readers will inform the user that a link is a link even if the text on screen does not say so. “Click here” does not inform where the link goes and is not meaningful.
- Links can be standalone or be a part of a complete sentence, just make sure the text is meaningful.
- Standalone example: Amazon Products.
- Part of a sentence: Read more about Amazon Products. Notice how I used “Read more,” that is OK here because it is not part of the link text, instead it is put in context of a meaningful sentence.
- Avoid creating very short link text, take the alphabetical index for example:
- Reason: Small links like this are small targets to access, people with motor challenges trying to click on the right letter here will have a hard time!
- Links should have an underline and be colored differently than the surrounding text.
- Reason: People need a way to distinguish a link from the surrounding text. The best way to distinguish a link is by color AND a non-color indicator. By underlining a link, people who are colorblind will have an easier time distinguishing it from surrounding text than by color alone.
To learn more about color contrast, read this WebAIM article on Links and Hypertext.
Adam Kosakowski works as an Assistive Technology Specialist at New England Assistive Technology (NEAT), an Oak Hill Center. He can be contacted at Adam.Kosakowski@OakHillCT.org and followed on twitter: @NEATWithAdam