A link (short for hyperlink) is an HTML object that allows the user to go to a new location when they select it.
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
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’.
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.
Links should have the correct colour contrast. To see the colours we use for links, go to the guidelines on colours.
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
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.
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
|3 June 2021||First version of page published|