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

Inaccessible Links

Other Link Tips

  • Don’t underline anything that isn’t a link.
  • Make sure links are big enough to easily click.
  • Make sure links have high color contrast.
  • Don’t rely on mouse hovering for information.
  • Check your old links to make sure they still work!