The importance of hyperlink text

In case you’ve missed it, there’s been a much stronger push towards making computing accessible to everyone. In particular around web design, a passion of mine, there are numerous sites which provide information and tools to help you get started, with the A11Y Project probably being the most popular among them.

I’m not going to spend time digging into the finer points of accessibility, why you should always use alt text for images, including those pictures you share on Twitter, as again there are a lot of resources already available.

Instead, I want to talk about one component of web dev — hyperlinks.

Why are you so interested hyperlinks?

Hyperlinks are pervasive. You use hyperlinks in Word documents, presentations, wiki pages, GitHub repositories… Despite this fact, people still frequently create hyperlinks by just pasting in a URL or, worse yet, using the text “here” or “click here” or “link”.

What’s the big deal?

As a sighted person, I can scan through a document looking for (typically) blue underlined text when looking for links. If the creator simply used here as their link text it’s trivial for the sited person to scan the context and determine what’s behind the link.

Someone using a screen reader can do the same thing by clicking a button. The difference is in the latter example the screen reader will read the text of the link. If the text again is here the user of the screen reader has no idea what’s behind the link.

If you’ve never used a screen reader, or seen a demonstration of one, you should take some time out of your day and track one down to better understand the experience. The University of Minnesota has a great article with some examples of screen readers reading links. Note the differences between the two examples, and which flows better.

Beyond accessibility

While simply creating content which is more accessible is enough in and of itself, creating good link text has additional benefits.

Descriptive link text aids search engines in gaining context and understanding about the pages being linked. This holds true for intranet content as well, meaning it will be easier for coworkers to find the content they seek.

Good link text can allow you to make your links a call to action rather than a call to click on something. Which of the following flows better?

• Click here to deploy your website
• Deploy your website

They’re both conveying the same all-up point about being able to deploy a website, but the latter is focused purely on the action the reader is going to take and not just on the click of a mouse. (And this is to skip over the pedantic point about users tapping or using other means to follow a link besides just clicking.)

Creating good links

The U of M accessible hyperlinks article provides some wonderful guidelines, but to get you started, here’s a couple of tips I’ve found useful:

• When in doubt, use or paraphrase the title of the target page
• If the target is documentation, highlight what the reader will learn (again — call to action not a call to click)
• Be descriptive, but not verbose; typically only a few words are needed

And, above all else, I strongly recommend installing and spending a little time with a screen reader. It’s hard to design for an interface when you have no experience with it.