Links and Buttons

Are you using links or buttons for navigation and actions?

Why it’s important

Janet is visually impaired and uses a screen reader. She needs to be aware if the button or link will take her away from the current page.
Kai has a dexterity condition and relies on his keyboard. When using the tab key he needs to know if the links or buttons are in focus.

Use links for less popular or less important actions. If designing an element that looks and acts like a button, use the button element rather than styling a link like a button.
An exception for using a link as a button is for call-to-action (CTA) or start buttons. Call to action buttons do not submit form data, so they use a link tag rather than a button tag. These are for the user to take a specified action. e.g.
- Start now
- Sign up
- Apply now
Include information about what a link leads to. Also advise if the link or button leads to an external target for screen readers. e.g. <span class="sr-only">(this link opens an external file)</span>
Check there is a visual state change other than colour when hovering or focusing on links. Underline links when possible, don't rely on colour changes alone to indicate links.
Avoid using <div> or <img> tags to create buttons, screen readers don’t know either is a usable button.
Use buttons to signal clickable actions using sentence case, such as “download”, “sign-up” or “log-out”.
Only use “role = button” when retrofitting accessibility into a legacy website where changing the HTML tags may affect the CSS. Or if the framework is already determined with no option to edit HTML buttons, for example <div> or <span>.

Last modified: 11 May 2021