Links

Cormac Chisholm(opens in a new Tab)

Aug 9th, 2022

·

4 min read

Over the last few lessons, we’ve been looking at some of the most common WCAG (Web Content Accessibility Guidelines) compliance failures, as identified by the WebAim Million report. In this lesson, we're going to talk about Links.

So, how do we make links accessible?

In order for a link to be accessible, you must be able to determine its purpose from the link text alone or from the link text together with its programmatically determined link context. A link in its simplest form of just text should be informative as to where the link is taking you either directly from the text included in the link or the context preceding it.

Here are some best practices to improve your links:

1. Remove Empty Links
2. Don’t use the word “link” in your link text
3. Avoid using URLs as link text
4. Notify the user before opening new windows
5. Keep the link’s text concise
6. Image links

Link to this headingRemove Empty link

Empty links are a very common issue, i.e. links that go nowhere or have no corresponding link text. They serve no purpose other than to annoy and confuse your users. Fix or remove them.

Link to this headingDon’t use the word “link” in your link text

Similar to what we outlined in our lesson on alt tags, most screen readers will identify a link from code, and announce it. Adding the words “link” or “links to” could cause more confusion as it might get read out as “Link. link” or “Link. links to…”.

Link to this headingAvoid using URLs as link text

This is an enhancement for screenreaders especially; links that are just URLs as text will be read out character, by character. So, a URL www.a11yexamples.com will be announced as, “w... w... w... dot... a... 1... 1... y... e... x... a... m... p... l... e... s... dot. c... o... m...".

This is difficult to interpret and becomes frustrating especially when trying to get context quickly.

So, instead try to use meaningful text as links, such as “a11y examples”. If you really need to provide the URL in the text, you can include a screenreader-only version of the link title (I have another post coming on this soon).

Link to this headingNotify the user before opening new windows

The best way to indicate that a link opens in a new window is to add text to the link, such as “(opens in new window)”. I think this article does a great job explaining this: “why let someone know when a link opens a new window”.

Link to this headingKeep the link’s text concise

Screenreaders announce all the content of a link, so it’s best to keep it short and to the point.

Link to this headingImage Links

WCAG outlines some specific requirements for images that are linked. The ALT attribute acts as the link text. So now not only must the alt text must describe the image but also it must tell the user what activating the link will do. If you do have a linked image next to a text link that goes to the same page, then in most cases that image just needs an empty ALT attribute.

TL;DR

In order for a link to be accessible, you must be able to determine its purpose from the link text alone or from the link text together with its programmatically determined link context.

Hopefully, now you have an understanding of how to create accessible links. I’ll be following up in the coming weeks with some more detailed posts expanding upon what we’ve learned so far, so if want any further information on any of the topics we’ve covered so far, just reply to this email and let me know.

In the meantime, keep up the great work,

• Cormac