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.

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

External links

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.

Opening links in a new tab

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.

<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.

Links to media files

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

Submit a request

Request a change or addition to the design system use this form.

Published 3 May 2024
Last updated 22 July 2025