Last reviewed: 9 August 2021

Elements

Links

A link (short for hyperlink) is an HTML object that allows the user to go to a new location when they select it.

Content guidelines

If you add a link, consider the user's onward journey. Sometimes links can distract the user from their core task meaning they may not return.

Use links to:

  • help users get to where they need to go
  • avoid duplicating information that exists elsewhere
  • link to an authority on a subject

Link text must:

  • not use vague terms, for example 'click here' or 'more information'
  • describe the page it goes to, for example 'Co-op digital accessibility standards'
  • make sense when read out of context – screen readers can read link text in isolation without the surrounding content
  • reflect what the user will see when they get to the page
  • be at the end, not the middle of a sentence – this makes it easier for people to scan

If the link is to an action:

  • include the action at the start of the link, for example, ‘book an appointment’
  • make the text between 2 and 4 words where possible – this can make the action quicker to understand
  • consider using a button if the action is the main thing you want someone to do on a page

Regularly review the links you use and remove or update any that are out-of-date or no longer work.

Linking to other websites

You might need, or want, to link to other websites that are not owned by Co-op (external websites). Any external websites you link to must be:

  • high quality
  • relevant
  • trustworthy

If they're not, it could damage Co-op's reputation.

If you're linking to an external site tell the user that they’re leaving our site, for example, ‘For more information visit citizensadvice.org.uk'.

If it’s a short URL (web address) – that is it contains no symbols and has a maximum of one ‘/' – use a full URL, for example 'For more information, go to bbc.co.uk/sport’. This means that people could remember it, or write it down, if they wanted to visit the site later.

If it’s a complex URL – that is it contains symbols or more than one ‘/' – use words as the link text, for example, ‘See the Content Design London Readability guidelines on links’.

Opening links

Links should usually be set to open in the same tab, so that people can use the 'back' button to navigate.

If you think the link should open in a new tab, include ‘(opens in a new tab)' as part of the link. For example, you can set a link to open in a different tab so that someone does not lose their progress in a form.

Design guidelines

Links should have the correct colour contrast. To see the colours we use for links, go to the guidelines on colours.

Underline

In general, links should be underlined. The underline should disappear when the user hovers their cursor over it.

You do not need to underline a link if:

  • there’s another visual cue that indicates that it’s a link, for example the arrow icon
  • it’s in context, for example within a header or footer

Focus ring

The focus ring appears as a purple outline around any object, including links, when someone selects it.

Do not remove the focus ring. Some people who use assistive technology need it to navigate our products and services.

Examples

Start making your will

A default link.

Start making your will

A default link with focus ring.

Book an appointment.

An example of a link to an action.

You can find out more in Co-op's digital accessibility standards.

An example of a link to a page.

For more information, go to bbc.co.uk/sport

An example of a link to a short external URL.

See the Content Design London Readability guidelines on links.

An example of a link to a complex external URL.

Find out more about Co-op Membership (opens in a new tab).

An example of a link that opens in a new tab.

SEO guidelines

Using relevant links in your content can help it to appear higher up in search results (known as search engine optimisation or SEO).

See how you can use links to help SEO.

Changelog for this page

Date Notes
3 June 2021 First version of page published

Get support

Co-op Digital colleagues can get support in our dedicated Slack channel:

#experience-library-support

Sign up for email updates

Get updates about changes and developments.

Sign up

Copyright © Co-operative Group Limited. All rights reserved.