Building an accessible website: Links

Links are the pathways that bind the web and give it structure. For people with web accessibility challenges, perceiving and understanding the links on your website is of utmost importance.

For your website to be accessible to people with disabilities, every link must:

• Be distinctly and consistently identifiable
• Clearly indicate its purpose
• Provide useful visual feedback when it receives focus
• Provide feedback once the target is reached wherever possible

Are your links consistently identifiable?

Let’s start off with the basics. Links can be grouped into three categories:

• In-line (or in context) links
• Links in a list
• Image links

Context links

Links appearing in-line or in context on your website must be distinct from the surrounding text. Historically, this has been accomplished by underlining links and presenting them in a colour that separates them from the remaining text. Modern designs often omit the traditional underline in favour of using colour only to distinguish links from normal text. Visitors that have trouble distinguishing colours may miss these important connections. You have three options:

1. Change the colour of the links to meet the contrast minimums specified in the WCAG. The technical aspects of achieving proper contrast are covered in our post Building an accessibility website: Contrast.
2. Underline the links. This can be addressed by either adjusting your CSS for all links on the site, or by providing an alternate high-contrast style for your website that is accessible by a clearly marked link.
3. Provide an icon next to your links. This is probably the least graceful of solutions and may pose problems with word and line spacing.

Whatever your decision, it is very important to implement your solution site-wide for every in-line link so that they are easily recognized as links.

Is your website accessible to people with disabilities?

Get our beginner's guide to website accessibility

Download your FREE copy

Lists of links

Links appearing in a list such as a menu or in a footer are not subject to the restrictions of links that appear in context. They do not have to match the style of in-line links on your site and do not have to contrast from the other text on your site.

Do your links clearly indicate their purpose?

Users should have as much information as possible as to what will happen if they invoke the link. Screen readers will use what information they have. Let’s look at a couple of examples:

In-line links

Here is a context link with a typical problem:

<p>
 The American Museum of Natural History has an amazing presentation about humpback whales. <a href=”https://www.amnh.org/exhibitions/3d-and-2d-films/humpback-whales”>Click here</a> to find out more.
</p>

The problem is the use of “click here”. This is a very common device in use on the web that should be avoided when striving for accessibility. This method is, in fact, taking the link out of context. People with disabilities will often view a summary of a page’s links to get a big picture of the interactive elements of a page. If you have four “click here” links on the page, it will be impossible to discern their respective purposes when presented in such a list. As well, a screen reader will only read “Click here link” which may make it hard for visitors to make the connection to what the link actually is. This is a better solution:

<p>
 The American Museum of Natural History has an amazing <a href=”https://www.amnh.org/exhibitions/3d-and-2d-films/humpback-whales”>presentation about humpback whales</a>.
</p>

For the above, the screen reader will read “presentation about humpback whales link.”

Image links

Suppose we would like our link to be an image. In this case, the screen reader will first read the alt tag of the image. This is one of the scenarios where the image does not need an alt tag, and is, in fact, better without it, but be sure to still include the blank alt attribute (alt=""). With a blank alt attribute, the screen reader will fall back on the URL portion of the link. This might not be useful as the link may not be very descriptive of the destination, or, as in our example, it might be completely indecipherable. We can make use of the link's "aria-label" attribute to provide the information our visitors need.

Code for above:

<a href="https://www.amnh.org/exhibitions/3d-and-2d-films/humpback-whales" target="_blank" aria-label="The American Museum of Natural History presentation about humpback whales">
  <img src="https://www.amnh.org/var/ezwebin_site/storage/images/_aliases/full_720/7/0/5/4/374507-1-eng-US/74d2f7f87e84-whale-1850235_1280.jpg" alt="">
</a>

or:

<a href="https://www.amnh.org/exhibitions/3d-and-2d-films/humpback-whales" target="_blank" aria-label="">
<img src="https://www.amnh.org/var/ezwebin_site/storage/images/_aliases/full_720/7/0/5/4/374507-1-eng-US/74d2f7f87e84-whale-1850235_1280.jpg" alt="The American Museum of Natural History presentation about humpback whales>
</a>

Do your links provide visual feedback when they have focus?

It is imperative that your links are accessible via the keyboard, specifically the tab key. A visitor should be able to access every link by tabbing through your pages. Beyond that, it is also necessary that your links visually indicate when they have focus. The focal state must be significantly different than the normal state. A slight change in colour is insufficient and will not be seen by users with difficulty distinguishing colour. If your links do not have an underline, a good solution is to underline the links when they receive focus.

For image links, a simple border around the image will suffice, but make sure the border colour contrasts enough against the background. Visual effects are also acceptable as long as they are straightforward in their nature, for example, a slight upsizing of the image.

Do your links provide feedback once the target is reached?

Links often depend on visual feedback to inform the visitor what has transpired after the link has been clicked. Special attention must be given to links destined for anchors. A common practice is to have empty anchors:

<a href=”#reports”>Reports</a>
...
<a name=”reports”></a>
<div>Reports</div>

This is unacceptable because although the focus will move down the page, it will be a purely visual event and visitors with extreme visual impairment will not know that they have navigated somewhere else. Screen readers will also remain silent as there is no content to be “read” after the “Reports” link is clicked.

A better solution is to make the content div the target of the link:

<a href=”#reports”>Reports</a>
...
<div id=”reports” tabindex=”0”>Reports</div>

Note that the id attribute should be used to indicate the target of links and not the name attribute. Also note that the div has been given a tabindex of 0. Not all platforms will allow this. In the correct example above, when the “reports” link receives focus, the screen reader will say “reports link”. When the link is invoked, the focus will move to the “reports” div and the screen reader will say “reports”.

If you need an anchor that is not visible, you must include a title attribute in the target:

<a href=”#reports”>Reports</a>
...
<a id=”reports” title=”Reports”></a>
<div>Reports</div>

Note again the use of the id attribute.

Links vs. buttons

Generally speaking, a link should be something that takes you to a different page, whereas a button initiates some kind of process. The important thing to remember is to identify a button as such with the use of the correct element, and not with a specially formatted link:

Don’t do:

<a href=”submitMyForm()” class=”buttonStyle”>Submit</a>

Do:

<button class=”buttonStyle” onclick=”submitMyForm()”>Submit</button>

or:

<input type=”button” class=”buttonStyle” value=”Submit”>

Ready to make your website accessible? Sign up to receive a copy of our website accessibility guide or contact us anytime for a free consultation.