Last updated January 11, 2021
How to add meaningful links and calls to action to content, and make them clear and accessible.
Provide links in context
Make sure all links are provided in context, at the point in the content at which they’re useful. Don’t put all the links together at the bottom of the page.
Don’t use unsorted lists of related links to point users to content you think they might be interested in. These are sometimes known as “further reading” or “more information”. A better approach is to consider building that content into the page you are on.
Writing link text
When writing a link, make it descriptive and front-load it with relevant terms instead of using something generic like ‘click here’ or ‘more’. Generic links do not make sense out of context or tell users where a link will take them.
Think about the size of the link users need to select. For users with reduced motor skills, a one word link could be very difficult to select.
Links that lead to an action
If your link takes the user to a page where they can start a task, start your link with a verb.
- For example: ‘Login to MyUW ’, ‘Update your profile’, or ‘Report an issue’
Links that lead to information (rather than action)
Use the text about that information as the link. Consider using the title of the page the link goes to, as your link text.
- For example: ‘accessibility testing’, ‘Wisconsin Union’, or ‘Dean of Students Office’
Multiple links
Do not use the same link text to link to different places.
Links help people scan content, so do not swamp them with too many or link to the same tool or webpage throughout your page.
Don’t place full URLs in your copy
Do this: Read this news article
Don’t do this: Read this news article: http://www.news.com
Don’t include preceding articles (a, an, the, our)
Do this: Read the library guide for details
Don’t do this: Read the library guide for details
Opening links in new windows or new tabs
Setting a link to open in a new window or tab changes the web browsing experience for users and can have disorienting effects for users with disabilities.
In most cases, links should open in the same window, but there are some exceptions.
"Read More" and "Click Here"
Generic and non-descriptive links like “read more” and “click here” do not help the user make a decision, and can be confusing, so they should be avoided.
They also do not work for people using screen readers, who often scan through lists of links to navigate a page. It’s important the links are descriptive so they make sense in isolation.
Associate the action in context to what the user will be doing.
Do this
View the syllabus
Download the time-off request form
Required reading: 18th Century Architecture
Don’t do this
Click here to read the syllabus
Learn more about Canvas Video tutorials
Use this link to download the time-off request form
Read this required article about 18th Century Architecture: https//www.reallylongurl.com/architechture-cen-18-default/145aspx
Predictability
Links and your calls to action should be predictable, and should open in the current window. That means the user should have a good idea what will happen next, just by reading the link text.
Do not underline text
Underlined text = link. Using underline for emphasis is misleading and should be avoided.
Buttons and links
Button text should also be clear, predictable, and in most cases should contain actions. Use descriptive text that uses a call to action and wording unique to the page. The button should help the user understand the action they are about to take.
Microcopy
A type of call to action, microcopy is small bits of copy that help your users take action. Your microcopy should be:
- Extremely concise and compact
- In plain language, not technical jargon, even conversational
- Actionable with buttons only including the action the user will take by clicking
This is an accordion element with a series of buttons that open and close related content panels.
Examples
Airbnb landing page examples of microcopy – “Places to stay, Monthly stays, Experiences, Add dates, Add guests, Explore”
Etsy landing page microcopy example – “Sign in button call to action, Gifts, Shop Back to School, Everyday finds.”
Microcopy should also reduce worries
-
- If there could be consequences, (example: getting spam after providing an email address) reassure your users with copy that confirms the worst wont happen.
- If an action is required, explain why, before the action needs to be taken so that users with screen readers are aware before it happens.