CTA Link
A Call to Action link is a link that directs the user to another page or website where they can complete the desired action. Call to action link is often used for marketing purposes, such as increasing conversions, leads, or sales.
On this page
Best Practices
- To add visual weight to a link
- To navigate to a different page
- To jump to an element on the same page
- Link to email or phone number
- Navigate to a different site
- Use links that are distinct, descriptive and consistent to help customers navigate the site
- To take an action, such as delete
- To open a modal
- To style a button
- More than one primary call to action on a page
- Use inside a paragraph or sentence
As call to actions links are links (<a/>), they are semantically different to buttons and should always be identified as a link regardless of how users consume them.
Recommendations
When to Use Call to Action Links
Call to action links are semantically different to buttons and should always be used as links (<a />).
Terms and conditions (goes to a new page or location within the page)
Terms and conditions (opens a modal)
Writing Call to Action
To make Call to Action links more accessible, avoid these common wording mistakes.
- Use a strong verb that conveys the action you want the reader to take once navigated to the new page or section for example ‘activate card’
- Put the most important part of the link first, such as Update preferences (Hilton)
- When you want to inform a user they are navigating to a new site a recommended best practice is to use the domain name in brackets or separated by a ‘|’ at the end of a link e.g. Update preferences | Hilton or Update preferences (Hilton)
- Only use punctuation for complete sentences and do not include the punctuation in your text link
- Use verbiage, such as “link to,” “click here,” or “learn more” as it does not provide enough context
- Use a URL as a link
- Use ALL CAPS except for the purposes stated in the Guidelines section
- Give different labels to links that serve the same purpose
All link text should make sense out of context and be clear in their purpose/destination. Links may be shown out of context with assistive technology such as Apple’s VoiceOver rotor where it lists all links available on the page including any CTA link. Adding inline icons after links such as “link out” also cause issues as they are usually added using the ::after pseudo element that is not recognised by all assistive technologies.
This means that common techniques such as an icon to tell you the link is external or CTA styling will not be shown to all users. Although CTA links help our sighted users find actions we must remember to make sure the link still makes sense out of context and additional information implied by icons is available in the text.
Choosing Icons
Icons used in call to action links should be simple, with well known visual metaphors a hand with a thumbs-up for feedback, pencil for edit, or a lock for security. For more information about icons in general, check out our icons.
- Use simple, well-known icons
- Take real world examples for example lock for security
- Be consistent. Always use the same icon for action
- Think customer consistency. Follow the icon names available in our icon library for the actions when possible
- Consider icon meaning and localization
- Use different icons for the same action
- Use the same icon for different actions
- Use complex icons
- Icons need to be simple and easy to understand
- For accessibility, we need to make sure we use icons for the same meaning throughout our website. Consistent identification accessibility standards
- Remember: the more complex the icon, the longer a user spends understanding them
Layout
Horizontal
When laying out call to actions horizontally, try to group relevant actions together, putting the primary last. This moves the user forward in the journey.
Vertical
Call to actions can be stacked by default or reflow to stack at smaller breakpoints.
- Stacked call to actions should have equal widths
- Primary actions will always be above a secondary
- Call to actions should always center horizontally within the component
Link Usage and Writing Checklist
Not sure when to use a CTA Link or what to write? Use this checklist to help refine your link text.
| Question | Do this | Don’t do this |
|---|---|---|
| Does your link navigate? | Terms and conditions (goes to a new page or location within the page) | Terms and conditions (opens a modal) |
| Does your link give context? | Edit email address | Edit |
| Does your link give context and purpose? | Update preferences (Hilton) | www.Hilton.com/update |
| Have you put important information first? | Products (opens in new tab) | Opens in new tab: products |
| Is the link readable? | Readable link | WWW.READABLE.COM |
| Does your link look like a link? | Edit email address | Edit email address |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.