Make Links Accessible and Usable

One of the easiest things to skim a webpage for are hyperlinks. Even visitors using screen reader technology can have their devices collect all links from the page and present them at once. In either case, links are most usable when the link text is descriptive. Moreover, accessibility guidelines require descriptive links. WCAG 2.0 states the following:

2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)

Why are accessible and usable links important?

If a user can see the hyperlink, but the link only says "click here," then the user will need to read around the link to determine where the link leads. This defeats the purpose of having links that can be visually scanned. But it also makes the links a real headache for users of screen readers. If the screen reader collects links for the user, the user could receive a series of links that all say "click here." Now the accessibility device that allows the user to navigate through links on a page has been rendered useless and the user may have to read through the entire page to learn about each link.

How to Write Accessible and Usable Link Text

Understanding user behavior and screen reader functions helps us to understand how to make our links both usable and accessible. Here are a few guidelines.

Guideline 1: Descriptive text

Good link text will be descriptive: The text of the link by itself should indicate what the target of the link is. In many cases, if you are writing in sentences or phrases, you may already have written text that would work ideally for your link.

Links that include only text like "click here" or "more info" are not sufficiently descriptive.

Likewise, links that are entire sentences may have too much information in them to be usefully skimmed.

Guideline 2: Start Link Text with Keywords

Accessibility devices include functions such as listing all links on a page in alphabetical order. This is a great feature to help users navigate through multiple links. (And it is one more reason why links simply stating "Click here" or "More info" lack usability.) If each link can start with a keyword that helps the user recognize the link target or content, this will make audibly "scrolling" through the list much more user-friendly.

Examples (the bold type in each example represents hypertext):

• Everything you wanted to know about dog training (bad example)
• Everything you wanted to know about dog training (good example)

Guideline 3: Do not include words like "link" in your link.

Screen readers will announce a link to the user by inserting the word "link" before the hypertext is read. So if a hyperlink text says "Text of the Constitution," the user will hear "Link: Text of the Constitution."

So if your link text said "Link to Text of the Constitution" the words "Link to" would be redundant to those using a screen reader (who would hear "Link: Link to...") as well as to those who are not (who can see the formatting of the link as an indication that the text is a hyperlink).

Good and Bad Examples

Let's take a look at a few examples and see what's good or bad about each.

1. Before joining this week's discussion, be sure to read the article "What's it All About?" Explanation: In this example, the text link seems vague. The rest of the sentence includes necessary context that a user cannot immediately grasp by skimming the page (either visually or with a screen reader). This is a bad example.
2. Before joining this week's discussion, be sure to read this article about critical thinking skills Explanation: The text that has been selected here includes enough description This is a good example. By not including the word "this" in the hypertext, the link text begins with more salient words, which will be useful in an ordered list of links.
3. To read the article about critical thinking skills click here Explanation: text link is non-descriptive. This is a bad example.
4. "What's it All About?" Explanation: This link has no context. All users would need to click to link to figure out where it goes. This is a bad example.

---