Accessible Web Page Design:
Making Links Accessible.

There are a lot of ways to make your hypertext links very difficult to use, and a few ways to make them more accessible.. Here are a few examples: (Please note -- the links in the examples don't go anywhere -- they are for illustration only.)

Example 1: Lack of context in links.

Canada is blessed with thousands of freshwater lakes and navigable rivers. It is no surprise then that boating is a popular recreation. The Ottawa River is a prime example of a great recreational waterway. The Ottawa River is ideal for power boats, sail boats, house boats, canoes, row boats and kayaks.

The Problem:

A typical screen-reader user would first listen to the entire paragraph being read. Most screen-readers do not distinguish between normal and underlined text at this point. Then, having read the text, the person will search for underlined link text, one occurrence at a time. In this example, the user would hear: "lakes, rivers, river, boats, boats, boats, canoes, boats, kayaks." There is simply not enough information in the link to let the user make an informed decision about which to choose. The person would have to re-read the paragraph or sentence to determine the context of the links. This is difficult and annoying.

The Solution:

The simple solution in this case is to put the HTML link element around more of the text to make the context self explanatory.

In this example, the user would hear: "freshwater lakes, navigable rivers, the Ottawa River, power boats, sail boats, house boats, canoes, row boats, kayaks." This is considerably better than the original -- but it is still not the ideal use of links.

Example 2: Click where?

Let's talk about birds in Canada. Click here to learn about Canada geese. Click here to learn about starlings.

The Problem:

This is similar to the first example, but provides even less information for the listener who would hear: "click here, click here". The problem would be compounded if, instead of using text in the link, the developer used an image as the link. For example:

Let's talk about birds in Canada. Click here to learn about Canada geese. Click here to learn about starlings.

Not only would the screen-reader give no useful feedback, how would a person with a visual impairment even know where to click?

The Solution:

Avoid the use of, "Click here"". It isn't necessary.
Especially, don't use "Click here" as the only link text.
Don't use graphics by themselves as links, especially if the graphics do not have any ALT=text associated with them.

In both cases, one solution would look like this:

Let's talk about birds in Canada. Select this link to learn about Canada geese. Select this link to learn about starlings.

Example 3: The Better Solution.

The a better solution for users of screen-readers is to separate the links from the body of the text into a menu or link list. Going back to our boating example:

Boating In Canada: