Skip to content
ASP Digital Design System

Your web browser is out of date

Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.

Cookies disabled

Cookies are currently not enabled in your web browser. You need to enable cookies to ensure you can complete this form.

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.

Functions such as “download” or “opens in a new tab/window” should be within the discernible text. This could be visually hidden if a symbol is used.

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) ]

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.

Published 3 May 2024
Last updated 22 July 2025