Links and buttons

The (important) distinction between links and buttons

Over the years, as the internet and digital design has evolved, the distinction between what’s a link and what’s a button has become blurred. This is particularly problematic for keyboard users because they have trouble activating a link or a button if it doesn’t act in the expected way. For example, if they encounter something that looks like a typical button, they would press the Enter key to activate it. If in fact it’s really a link then nothing will happen. This is confusing. They would likely go on to try using their space bar, but it has created unnecessary friction to their experience.

Basic rules for links and buttons

If something acts like a button – submitting a form, or closing a dialogue box – it should look, act and be built like a button. If it is a regular link that takes a user to an external page or document, it should likewise, look, act and be built like a link.

Think of it like a door. If it has a handle, you’d expect to pull it. Or, if it has a flat panel, you’d try pushing it. If you push, or pull and the opposite result happens (or worse, nothing happens at all) it would be pretty frustrating.

Elements of a button and a link

Buttons

• Styling – tend to be big and bold and housed in a coloured shape, such as a rounded rectangle.
• Code – the ‘button element’ must be used.
• Effect – perform an action, such as submit, buy, or start.

Links

• Styling – usually text with an embellishment such as, underline, bold or larger font.
• Code – should always use the ‘anchor element’.
• Effect – take the user somewhere. Unlike buttons, if you right click it on a desktop, it should be possible to open a new tab, copy the address or bookmark it.

Writing effective links and calls to action text

Screen reader users often tab between links to help them understand what’s on the page. Therefore, link text must describe both its purpose and destination, in the most concise way.

Links should also:

• make sense in isolation
• not include the word ‘click’, which assumes users are using a mouse.

Here’s an example of an incorrect list of links on the mortgages page on our website:

1. Find out more
2. Find out more
3. Find out more
4. Find out more

This list is incorrect. It wouldn’t be useful for a screen reader user, because each link means nothing out of context.

Now consider:

1. Find out more about mortgages
2. Use our mortgage calculator
3. Decide which mortgage suits you
4. Download our mortgage application pack

This list on the same page would be useful. It’s describes what and where each link takes a user. Additionally, it allows a screen reader user to:

• Navigate confidently to the place on a page they need.
• Get a sense of what the page is offering as they go.
• Save time, by allowing a first letter search to call up a relevant link.

Example images or assets

Suggested images – links/buttons/calls to action