Links – GCWeb design system
A link (or hyperlink) is a word, phrase or image on a web page that people select to move to another part of the same content or to access an entirely different web resource (such as a web page, video or downloadable file).
On this page
- Use links strategically
- Make sure link name represents the destination content
- Check that links work
- Capitalize links correctly
- How to link to various types of content
- Linking to internal-to-government content
- Linking to external content not available in both official languages
- Opening links in the same tab or a new tab
- Linking to a specific location on a page
- Creating a link as a button
- Providing links for related information
- Avoid placing links mid-sentence
- Placing rescue links below page titles
- Email addresses as links
- Using italics in links
- Vanity URLs
- Meeting the Accessible Canada Act (ACA) requirements
- Design options
Use links strategically
Links guide people to the information they are looking for. Use links to avoid repeating information that is already clearly expressed on another web page or to reference related information, such as definitions, supporting information or background information.
Be strategic about how you place and create links on a web page and about how many links you provide:
- Include links that directly support the topic or task on the current page
- Link to the original information posted by the authoritative source
- Do not include links to intranet sites unless the content targets government employees
- Do not bury links that are crucial to completing a task in the middle of a paragraph or at the bottom of the page.
Make sure link name represents the destination content
Link text should represent the destination content a person will find once they select it. Not doing so can confuse and frustrate the user. For accessibility, the purpose of each link (English only) must be determined from the link text alone or from the link text together with its programmatically determined link context (English only). Also, let people know if the link content must be downloaded to view the content.
Make sure the link text both:
- Represents the destination content
- Works within the context of the page in which the link text appears.
Use
- The first words of the target page or its entire title if it's descriptive enough
- Keywords at the start of the link that accurately describe the target page if the page title isn't enough
- Unique descriptive text on the same page if they link to different target pages
- The same words for the hyperlink even when more than one link on a web page links to the same destination page
Do not use
- The same link text to point to 2 different pages
- Vague statements such as click here or read more
- Promotional messaging that might confuse someone who is deciding whether to go to the page that is being linked to
- Link text that may link to a heading that changes on a timely basis
Example: Making sure link names represent the destination content
Write:
In Québec, you are the legal representative if you are registered as the liquidator of the estate and may have additional administrative duties. Visit Revenu Québec's steps to follow after a death for this information.
Don’t write:
In Québec, you are the legal representative if you are registered as the liquidator of the estate and may have additional administrative duties. Click here for more information.
Write:
If you file your tax return after the due date and have a balance owing, you will be charged a late-filing penalty. Filing late may also cause delays to your benefit and credit payments.
Don’t write:
If you file your tax return after the Filing due date for the 2022 tax return and have a balance owing, you will be charged a late-filing penalty. Filing late may also cause delays to your benefit and credit payments.
Check that links work
Make sure your links work. Links that don’t work frustrate people and hurt the credibility of your content. Check that they take people to the correct page and are in the appropriate official language.
For pages you create, check links regularly to make sure they still work and update any broken links.
Capitalize links correctly
For a standalone link, capitalize the first letter of the first word, then write using sentence case.
Use lower case for a link in a sentence, unless the link contains a proper name.
When linking to published works like books or journals, use the same capitalization as the work.
When writing hashtags for social media, capitalize each word within the hashtag.
How to link to various types of content
Linking to internal-to-government content
In most cases, public-facing content should not link to content that is accessible only through internal government networks. Occasionally, the audience for content that is accessible to the public may be primarily internal.
When a link leads to content available only on internal government networks, write (accessible only on the Government of Canada network) after the link.
Example: Linking to internal-to-government content
Managers and Human Resources professionals can find helpful information, tips, and strategies to recruit and hire persons with disabilities using the Hiring Person with Disabilities Toolkit (accessible only on the Government of Canada network).
Linking to external content not available in both official languages
Some non-government external web content isn't available in both official languages. If you're linking to external web content that isn't available in the language of the current page, write what language it is available in after the link.
Example: Linking to external content available only in French
For passport renewals for French citizens, refer to Renew your French passport while abroad in Canada (French only).
Opening links in the same tab or a new tab
Your links should open in the same tab, unless doing so would interrupt the task the user is trying to complete. Opening in the same tab lets users use the “back button” to return to the previous page and helps people with visual disabilities, cognitive limitations, and motor impairments by reducing the chance that a change of context will occur unexpectedly.
Linking to a specific location on a page
If you want your link to take people to a specific place on a page, make your link anchor to the relevant heading or subheading. To create an anchor link, first add an ID attribute to the heading tag of the link destination, then include the ID in the link’s URL.
Avoid using other methods of linking to a specific location (such as the scroll to text browser function) as these usually do not meet accessibility requirements for people using assistive technology.
Creating a link as a button
Consider turning a link into a button if you have an action you want the user to complete. For example, you have a page that introduces a new benefit. However, use buttons sparingly and do not have more than one button on a page.
For more information, refer to: Buttons
Providing links for related information
If you need to provide links to another page, form, policy or guide that isn’t part of the main task, introduce the link with a verb (a call to action) or supporting text that provides context using a colon. Depending on the context of why you are providing the link, you may need a lead-in sentence.
Examples of introductions to links:
- Refer to:
- Learn more:
- Review:
- For details:
Avoid using the word see to refer users to links. It is not a clear call to action that tells the user what they should do with the information they find at the link.
If there are multiple links, you can list links using bullet points at the point of need for your user. Do not create a page with a list of links with little or no other context.
For cases where you want to provide a list of resources or a reference for a task, such as technical guides, place these on the appropriate page under a specific heading.
Example: Linking to one source of related information with no lead in sentence
For details: Disability deductions and credits
Example: Linking to one source of related information with a lead in sentence
For more information about how instalments work, refer to: Paying your income tax by instalments.
Example: Listing multiple links of related information
To learn more about other government funding and assistance, review:
Example: Listing a resource at the end of a page
Resource
Information circular, IC82-6R13 Clearance Certificate
Avoid placing links mid-sentence
Mid-sentence links can be distracting. They can slow scanning because people need to stop and read text on both sides of the text. If your sentence needs a link to provide a definition or information on another page, try to place the link at the end of the sentence.
Example: Linking at the end of a sentence
An SR&ED project starts when you identify the need for a scientific or technological advancement that overcomes a scientific or technological uncertainty.
Placing rescue links below page titles
In some cases, users end up on a page that risks being the wrong one (for example, users may confuse "pay arrangements" and "instalments").
Place rescue links when there is a good chance the user may land on a page, likely via search results, and that page could compete with other similar pages.
Make sure rescue links:
- Always go at the top of page, below the title
- Use the bolded lead text "You may be looking for:"
- Are only use on a page that could be easily mistaken for other content, or a page that search engines rank high, yet could be the wrong page for other common tasks
Example: Adding a rescue link to the top of a page
You may be looking for: Make a payment for individuals
Email addresses as links
Write e-mail addresses in full instead of embedding the link in your text.
Example: Writing an email address in full
Write:
- Submit your request by email to abcxyz@canada.ca
- Submit your request by email: abcxyz@canada.ca
Don’t write:
- Email us to submit a request.
Using italics in links
If you are linking to an act or titles of publications, follow the guidelines for writing using Emphasis.
Vanity URLs
Short, easy-to-remember web addresses are called vanity URLs (or vanities). Vanity URLs are intended for promotional material and should be used sparingly. Vanity URLs are meant to be used to drive traffic to a website or certain webpage. They are often used in TV, radio and print ads.
Writing effective vanity URLs
When writing URLs for communication products, you can use either the primary URL or a vanity URL. Vanity URLs are unique and relevant to the page you’re trying to promote.
Make sure to:
- Choose a vanity URL that is easy to remember
- Link to the main page of a form or publication
- Use dashes in between words
- Use plain language keywords
- Avoid using acronyms and abbreviations, unless they are better understood than the full version or perform better on search engines
- Avoid linking to parts of a form or guide
How to request a CRA vanity URL
PAB's Digital Communications Team is responsible for maintaining Canada.ca vanities for CRA, as well as for making all vanity URL requests and amendments to the Principle Publisher (PP) on behalf of the Agency.
Refer to: Request a vanity URL for CRA content (only available for internal employees)
Meeting the Accessible Canada Act (ACA) requirements
The Accessible Canada Act (ACA) requires content created for the Canada Revenue Agency meets the goal of realizing a barrier-free Canada by 2040. The CRA uses the Web Content Accessibility Guidelines (WCAG) to help the CRA meet the ACA.
By following the guidance in the UCDG, your web content should meet the the following WCAG success criterion:
- Understanding Success Criterion 2.4.4: Link Purpose (In Context) | WAI | W3C
- Understanding Success Criterion 2.4.9: Link Purpose (Link Only) | WAI | W3C
- Understanding Success Criterion 3.2.1: On Focus | WAI | W3C
- Understanding Success Criterion 3.2.5: Change on Request | WAI | W3C
Design options
Appearance
HTML code
<a href="#" class="btn btn-default">Your link</a><a href=""><img src="your_image_source" /></a><div class="col-sm-4">
<a class="gc-dwnld-lnk" href="#">
<div class="well gc-dwnld">
<div class="row">
<div class="col-xs-4">
<p><img class="img-responsive thumbnail gc-dwnld-img" src="images/download_link.png" alt=""></p>
</div>
<div class="col-xs-8">
<p class="gc-dwnld-txt"><span>Document title</span>
<span class="gc-dwnld-info">(<abbr title="Portable Document Format">PDF</abbr>, xxx <abbr title="KiloByte">KB</abbr>)</span></p>
</div>
</div>
</div>
</a>
</div><p class="pull-left small"> <strong>You may be looking for:</strong></p>
<ul class="pull-left mrgn-lft-md list-unstyled small mrgn-bttm-lg">
<li><a href="#">Link to reference page</a></li>
<li><a href="#">Link to second reference page (if necessary)</a></li>
</ul>
- Date modified: