Link Accessibility

Hyperlinks are often taken for granted. We’ll often Click Here for an Insane Offer! or Learn more about Antarctic midges without thinking too hard about the technology that allows us to do this so easily. However, it’s not that simple for users of screen readers.

Why Does This Matter?

Making links accessible comes down to two things: making them understandable and convenient. When screen readers come across a link, they read it as “link [link text]”. This makes things like link to website repetitive, since it will read as “link link to website”. It also makes typed out links (like https://en.wikipedia.org/wiki/List_of_individual_dogs) annoying, since the screen reader will read out every part of that link down to the punctuation.

It is also important to make sure links make sense out of context. In the same way you would skim over a website, screen reader users will often “skim” a website by jumping between headings and links. If your links just say “click here” or “read more”, users will have no idea what they’re referring to because they have limited context. They will have to read the whole paragraph or page section just to find out where the link leads, which can be time consuming.

Descriptive Link Essentials

The best way to make links accessible is to use what are called descriptive links. This is where you attach the link to enough text that you can easily tell what the link is for, but not too much that it becomes a waste of time to read all the way through. Here are some tips to write effective descriptive links:

Don’t include words like “click here”, “read more”, or “more information”.
Use keywords about the linked page.
Include the “important bits” of information in the linked text.
- For example, if you’re linking to the IMDB page of voice actors for a movie, include both the movie’s name and the words “voice actors” to give proper context.

Examples

Good Descriptive Links

Listen to Queen’s Bohemian Rhapsody on Spotify.
If you have any questions about how to create quality captions, read Snow’s Caption Quality Standards.
Check out this list of Marvel movies in chronological order.

Inaccessible Links

Learn more about Japan National Route 7 here: https://en.wikipedia.org/wiki/Japan_National_Route_7
You can learn all about the DC Animated Movie Universe, including which movies different characters appear in, here.
Click here for more information about the James Webb Space Telescope.

Linked Images

Text links aren’t the only types of links out there. Often, images will be placed on a page and used as a link, with or without text explaining what it is. As you can imagine, these aren’t inherently accessible!

In cases like these, the best thing you can do is add alt text to the image. However, instead of explaining the image, the alt text should describe what clicking the image would do. So for example, if you had a graphic of a printer used to print a document, the alt text should say “Print the document.”

You can read more in-depth about different linked image examples on W3C’s Functional Images page.