Accessible Links

Imagine only seeing the links on your web page and nothing else. If they all said “Read more”, where would they go? This is why descriptive link text matters for better usability and SEO.

Video Write Better Link Text

Intro

Imagine if someone read out your website to you. When they reach a link, they read out loud: "Link. Read more." You want to move faster, so they skip to the next link: "Link. Click here." And the next: "Link. See more."

Wait, what? Where do these links go? People who use screen readers experience this all the time. Think about it. Without the context of the surrounding text, these links could lead anywhere, particularly if they're used multiple times and link to different destinations.

What is link context?

The easiest way to fix this is by adding context to your link text. Take this sentence for example. An example: "Accessibility helps improve your website's user experience. Link. Read more." Does the "Read more" link take us to a page about accessibility, user experience, or a page about both? It's hard to say.

If we add more context to our link text, we get something that's super clear. "Accessibility helps improve your website's user experience. Link. Read more about the benefits of an accessible website." See how much clearer that is? And the cherry on top, it adds context for all users, even those not using a screen reader.

Add context without increasing link length

But is there a way to add this context for screen reader users without making the link text longer? You're in luck. However, be warned, this solution does require a more technical mind.

Let's take a look at our original sentence again. "Accessibility helps improve your website's user experience. Link. Read More."

This time we're going to use ARIA. The ARIA label attribute allows us to define a descriptive text label for our link and add the extra content needed for assistive technology. Don't worry, it won't change the visible link text, but it will be read out by a screen reader. And that's it! You can keep your read more links but still provide the context for screen reader users.

Everyone deserves access to the internet. If you need help getting your website up to scratch, visit silktide.com.

How to write links

Link text should always be descriptive enough to stand on it’s own out of context

Link text needs to clearly tell users where the link will take them or what action it will trigger. Non-descriptive or vague link text can be confusing and frustrating.

Bad link text examples:

  1. Click here to watch the video
  2. Read more
  3. Download
  4. https://example.com/resources/guide

Good link text examples:

  1. Read about our mission
  2. Tips on how to eat healthy
  3. Download the email checklist (PDF 15KB)
  4. Top 10 Tips for Writing Engaging Emails

Video How do you know when text is a link

How do you know what is a link you can click on, and what is just text? Did you answer, because they're blue?

WCAG rules say that color isn't enough to make it clear that text is a link.

So what can we do? Ever notice how when you move your mouse over that blue text it often underlines so you know it's a link? Underlining the links makes it much easier for everyone to identify what bits of text are clickable links.

It's often a relatively simple change in your website's code but it can make a real difference to your website visitors. Everyone deserves access to the internet. If you need help getting your site up to scratch, visit silktide.com

Link Best Practices:

Make hyperlink text descriptive and meaningful so it makes sense out of its context.

Make the text unique. Don't have a bunch of "Learn More" links.

Make links easily distinguishable from rest of the text. The best way to do this is to underline!

When hyperlinking an image, provide the destination of the link in the alternative text.

Avoid opening links in new tabs. If necessary, notify users, as unexpected new windows can disorient people with cognitive disabilities and screen reader users.

Bonus tip: linking to a file

How do you link to a file to be downloaded such as a PDF? Compare these two ways of linking a document:

  1. WebAIM: Web Accessibility Principles
  2. WebAIM: Web Accessibility Principles (PDF, 327 Kb)

The first link looks like a normal link, but clicking it actually starts downloading a file. The second one lets the user know that clicking the file will start downloading a file and tells them how big it is.

Remember to upload an accessible PDF file.

In Summary: Links are among the most important elements on a website. Make sure all visitors can easily spot and use all links, know where each link will take them, and know what to expect if they do click.

BACK TO GUIDES