Guide to accessible content

Links

Page contents

The web is all about quickly and easily getting to where you want to be. We should bear this in mind for our links.

Accessible link text

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

Sighted people can also glance at any links for the same reason, while people using screen readers can access a list of all the links on a page – but links aren’t helpful if they all say things like:

  • Click here
  • Learn here
  • Read more
  • Find out more
  • Watch our video

Non-descriptive link text makes it hard for anyone to quickly understand the purpose of the link and its likely destination. Sighted people are forced to read more of the surrounding text content, while people using screen readers have no choice but to read the entire page.

Companion video: Write more accessible link text

Use descriptive link text

  • Avoid writing link text like ‘click here’ or ‘read more’.
  • When linking to files, it’s helpful to include the file type and size in the link text, e.g. 2026 Annual Report (PDF, 120KB).

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?
  • 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’.
  • Do people really need to be told what to do with a link?

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

Web addresses

Avoid using a URL as link text

  • Use the name of the linked resource as the link text.

URLs used as link text will be read out loud by screen readers. URLs can be really long and include abbreviated words and combinations of random letters and numbers, which are likely to be mis-pronounced or even read out character by character. This isn’t especially helpful for people using screen readers.

For sighted people, it’s quicker and easier to make sense of natural language than a URL.

Email addresses

Use UpperCamelCase to improve readability

  • Email addresses are easier to read if each new word starts with a capital letter, e.g. [email protected]

Links opening in the current view is the browser default and 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 choose to force a link to open in a new window, warn people as part of the link text, e.g. Review our terms and conditions (opens in new window). For security reasons, be sure to add the attribute rel="noopener noreferrer" to the link. The resulting HTML code should look something like this:

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