Accessible Web Links: Why "Click Here" Has Got to Go

For the over 200 million people globally who have a vision impairment (source), the World Wide Web can be a difficult place to traverse. While screen readers provide more access to those with disabilities, not all websites are designed with screen readers in mind. One area of websites that can create a hold up for users is link text. Follow these simple guidelines to create accessible, clear, and concise links for your users: visually impaired or not.

Commonly on the web, you'll see link text like "Click Here", "More", "Register", and "Download". For those using screen readers, this link text often gives them more questions than answers. They aren't able to receive visual cues on the context from the rest of the page.

"Why should I click here?"

"What am I downloading, registering for, or reading more of?"

Your link text should help the user understand what action they are taking. Is the link bringing the user to another page? If so, what one? What are they registering for? What document are they downloading?

Here are some examples taken from local websites:

1. Walker Art Center

On the garden visit page, the Walker invites users to download a document for their self-guided tour. However, the download link is put before the text telling the user what they are downloading.

With some slight restructuring, we can make the link text more descriptive of what the user would be downloading.

2. Guthrie

For Guthrie Theater's press section, each press release is a link. The difficult thing about this is #1 The links' text is incredibly long and #2 The user doesn't know what behavior to expect. On some sites, the press releases are like posts on the website, in this case, it opens up a PDF. You want to give the user some indication if the link is going to open a new tab.

While shortening the text may not be an option for The Guthrie's press department, adding a little note at the end of each press release title may be.

Note: Be careful of abbreviations in your text. Some screen readers aren't able to handle it, so in the case of the word "Dec." in the third press release title, my screen reader read it as "deck".

3. Minnesota Legislature

Here, we have a couple of examples of ambiguous link texts. When the text before "redistricting" is "visit", it can leave the user wondering if this link will give them directions to a physical location, or simply take them to another part of the website.

Also the infamous "here" link. Here where?

Using much of their original text, I edited the first link to include "web page" so the user would know that they are going to another part of the site.

Since the Minnesota legislature already used the word "PDF" (a huge plus), I simply made "PDF" and it's description the link text.

Time to look at your web page's links. By looking at just the link and immediately preceding context, do you understand what the link is doing or where it is taking you? Is the link text accessible for a screen reader, or a little clunky (A free screen reader tool if you're not sure)?

Asking these questions now will create a better experience for users of all abilities.