Hyperlinks were the original interactive content that made the web, well, interactive. They remain among the most heavily used interactive controls across the internet, even today.
Although they may seem simple to operate for users without disabilities, they can pose challenges for users with certain disabilities. Luckily, the solutions are — fittingly — simple.
Good writing applies to links, too
Communications staff and web content producers typically focus on writing high-quality text for their websites. However, when it comes to hyperlinks, that quality writing seems to go out the window.
Issue 1: Including links as text
A link has two parts: the URL that it points to and the link text that appears on the screen. There is no reason that these components have to be the same. How many times have you seen web pages with links that look like this:
Other major players in the space industry include:
Imagine the tediousness of listening to the links above said through a screen reader: “h, t, t, p, colon, forward slash, forward slash, w, w, w, dot, bigelowaerospace, dot, com.” Pretty frustrating, right?
Wouldn’t you prefer to hear the following:
Other major players in the space industry include:
Writing cleaner, more readable link text is among the easiest ways to make your site more accessible. Plus it makes the content more readable for everyone involved.
Issue 2: The “click here” confusion
Another common problem with link text is “click here” (and similar). For example:
To visit the UserWay site, click here.
Screen reader users face some of the most serious challenges when it comes to navigating the web. If nothing else, having to listen patiently to all the text on a page is a waste of time, particularly if they are seeking a specific link.
One of the shortcuts many screen reader users employ to speed things up is to skip through the links on a page. This lets them hear an overview of the page and get their bearings before returning to the top to begin listening to everything.
When a screen reader user lands on a link, the reader will announce “link” followed by the link text. In the example above, they would hear “link: here.” That’s not terribly helpful.
Rewriting the link text to become meaningful enhances the experience greatly for screen reader users and almost everyone on the web. Here’s a better way to write that text:
Visit the UserWay website.
Opening a new set of issues
It’s common to set certain hyperlinks to open in new windows (or tabs). For example, designers may want to offer users an easy way to return to the original site where they left off.
Taking users to a new window or tab, however, can be confusing even for sighted users. Imagine navigating a site using a screen-reader and suddenly finding yourself in a new window without clear warning beforehand. It can be disorienting at best.
Consider adding a note to links that open in new windows to forewarn users:
For more details, please visit the UserWay website (links to a new window)
If having the note appear within the link text seems clunky, there are ways to hide it from appearing on screen while still allowing screen readers to pick it up. Consult WebAim’s Invisible Content page for details.
PDFs, Images, and Other Files
It’s relatively common to post files for download on certain web pages, whether they are PDFs, Word documents, ZIP files, or something else. For example:
To learn about all the great work we’ve accomplished, view our Annual Report (Word document).
Can You Point Me to the Links Again?
Once upon a time, all hyperlinks were blue and underlined. Today, however, most web designers favor subtler ways of differentiating links from regular text. However, achieving visual differentiation can be surprisingly difficult if you care about accessibility.
Both color blindness and low vision are disabilities which can be easily overlooked when designing a site’s color scheme, including link color. Plus, the needs of color-blind users and those with low vision are often at odds with each other.
Link color should contrast with text color, but certain combinations should be avoided. For example, blue text with purple links or black text with dark red links meld together to become indistinguishable for users with different varieties of color blindness.
Toptal offers one of the best online color blindness simulators to help you find color schemes that are friendly to color-blind users.
However, even with a color scheme that works for color-blind users, designers must be careful that both the regular text color and link color offer sufficient contrast against the background color for users with low vision. We offer a color contrast checker that will let you know if you have the right contrast ratios.
If you are having trouble finding a color scheme that’s attractive to sighted users and also usable by users with color blindness and low vision, there is another solution as well — install the UserWay widget.
One of its many helpful tools will highlight the links throughout the site. This gives users the ability to highlight links if they need to and can offer the best of both worlds to site creators who are picky about their color scheme and also passionate about making their sites accessible.