Guide to accessible content

Links

Page contents

The web is all about quickly and easily finding your way to where you want to be. We should bear this in mind when writing links.

Accessible link text

We know that headings are helpful for both sighted and visually impaired users, helping them quickly get a feel for the content on a web page.

Sighted people wil also scan the link text on a page for the same reasons, and screen reader users have a command to call up a list of all the links on a page. Links such as ‘click here’, ‘read more’ or ‘watch our video’ don’t provide any detail about their purpose or destination.

Companion video: Write more accessible link text

Use descriptive link text

  • Avoid generic link text, such as ‘click here’ or ‘read more’.
  • When linking to files, it’s helpful to include the file type and size in the link text.

Generic link text also affects sighted people, who will have to read more of the surrounding text content to understand what the links are for — an annoyance for people trying to get the information they need, quickly.

An example of improving link text

Suppose you want to link to an online booking form for making appointments. You might start with something like: Click here to book an appointment. Linking only the words ‘click here’ means the link doesn’t give any context about its purpose.

An improvement would be to link more of the surrounding text, for example: Click here to book an appointment. The text inside the link now gives people a clear indication of what to expect if they visit it. But this link still isn’t ideal:

  • The words ‘click here’ only make sense if a person is using a mouse; what about people using touch screen devices, or sip and puff devices? And do people really need to be told what to do with a link?
  • Screen reader users know when they are on a link, and links should be visually obvious without needing to include ‘click here’.
  • Imagine the annoyance for screen reader users if every link on the website started with the words ‘click here’.

The optimal link text would be: Book an appointment. It’s descriptive and to the point.

Use UpperCamelCase to improve readability

  • When writing out website and email addresses, social media handles and hashtags, start each new word in the text string with a capital letter: #MakingLifeEasier
  • It makes them more legible for everybody.
  • It helps prevent embarrassing situations, where our eyes might be drawn to unintended words within a string of text.

Links opening in the current view is the default browser and the best practice.

  • Forcing links to open differently is inconsistent with most people’s expectations.
  • Different people navigate the web in different ways. Some may choose to open links in a new view; others may prefer going forwards and backwards in the same view. That choice should remain with users.
  • Sighted people can see the new window, although this may be less obvious on mobile devices, but if somebody is distracted or has cognitive difficulties they may have trouble interpreting what has just happened.
  • Newer screen readers only warn people that a link opens in a new tab after the event. Older screen readers provide no warning.

There are some reasonable exceptions, such as displaying help documentation alongside content, or allowing people to review terms and conditions while filling out a form. Wanting to keep people on your website is not a reasonable exception.

If you decide to force a link to open in a new window, be sure to warn people by adding ‘(opens in new window)’ to the end of the link text. For security reasons, be sure to add the attribute rel="noopener noreferrer" to the link, which should then look something like this:

<a href="http://www.example.com" target="_blank" rel="noopener noreferrer">Review our terms and conditions (opens in new window)</a>