Skip to content
ASP Digital Design System

Links

Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.

Open this example in a new tab: links

<p>  
  Jump to <a href="#">HTML example</a>.  
</p>

If it’s an external link to a non Avon and Somerset Police website, make that clear in the link text. For example, ‘read advice on writing link text from [name of organisation]’. There’s no need to say explicitly that you’re linking to an external site.

Avoid opening links in a new tab or window. It can be disorienting — and can cause accessibility problems for people who cannot visually perceive that the new tab has opened.

If you need a link to open in a new tab — for example, to stop the user losing information they’ve entered into a form — then include the words ‘opens in new tab’ as part of the link. There’s no need to say ‘tab or window’, since opening in a new tab is the default behaviour for most browsers.

Include rel="noreferrer noopener" along with target="_blank" to reduce the risk of reverse tabnabbing. The following example shows how to do this in HTML.

Open this example in a new tab: links

<p>  
  <a href="#" rel="noreferrer noopener" target="_blank">Link text (opens in new tab)</a>.  
</p>

If you’re displaying lots of links together and want to save space and avoid repetition, consider doing both of the following:

  • adding a line of text before the links saying ‘The following links open in a new tab’
  • including <span class="sr-only">(opens in new tab)</span> as part of the link text, so that part of the link text is visually hidden but still accessible to screen readers.

[ Add information about name the file type in link. eg. link to document (PDF) ]

Published 3 May 2024
Last updated 6 August 2024