Links and buttons
Links and buttons help people navigate around the site or service and find the content that’s relevant to them. Make sure links and buttons are accessible to everyone.
On this page
Link and button design
Links and buttons must be large enough to easily tap or click, even if the user has dexterity or mobility problems such as a tremor. There should also be enough space between different links and buttons to stop users selecting the wrong one by accident.
They should also be easy to identify – for example by using underlines, colour and contrast.
For more information about colour contrast, see our accessibility guidelines for colour and contrast
Use links and buttons consistently
Typically, buttons should be used to do something, and links should be used to go somewhere.
- Use a button for things like ‘Apply’ ‘Start’ ‘Contact us’ or ‘Submit form’.
- Use a link if you want to link to another page or website where a user can get more information.
- Use buttons for the main CTA on a card, but you can also include text links in the card copy
Making links accessible
To make them easy to spot, our design system uses an underline to identify links, and they’re usually a different colour to the text around them. The colour you should use depends on the brand you’re working on, and colour contrast applies too. If you’re adding links in the CMS, the correct styling and colour should be applied automatically.
Find out more about accessible colour and contrast
When adding a link in a piece of content, always make sure to add the link as a hyperlink to anchor text – rather than inserting the full URL.
Example
Do this: You’ll find more information about this in our system guidelines section.
Instead of: You’ll find more information about this here: https://scotent-uat-dsdocs-cms.azurewebsites.net/system-guidelines/
Make sure the anchor text gives enough context so users know what to expect when they click it. Never use ‘Click here’. If a link opens in a new tab or window, make sure this is clear, and if it’s a download, make sure to tell the user the file format and size.
Examples
Before you start building a digital service, make sure you read our accessibility guidelines first.
For more information about the standards we follow, see the Web Content Accessibility Guidelines (WCAG) 2.1 opens in a new window
If you’re interested in making services accessible for users with dyscalculia or low numeracy, download the gov.uk poster (PDF, 0.6 MB, 1 Page) to display around your office.