Links

Library integration

Use the codes below to add this component to your project. Download the latest version of the library to easily implement our full range of components.

Angular

<cpc-ds-links 
    link="http://git.com" 
    body='Setting Class Name'
    target="_blank">
</cpc-ds-links>

<cpc-ds-links fragment="education"
    [routerLink]="['/user/khan']"
    body='All Params'
    [queryParams]="{debug: true, name: 'goldey'}"
    linkState="{tracingId: 123}"
    [externalLink] = "false">
</cpc-ds-links>

<cpc-ds-links 
    ariaRole="button" 
    link="http://canadapost.ca" 
    body='Canada Post'>
</cpc-ds-links>

<p>
    Lorem ipsum dolor sit amet, <lib-ds-links ariaRole="link" link="#" body='consectetur'></lib-ds-links>
</p>

<p class="legal">Lorem ipsum dolor sit amet, <lib-ds-links ariaRole="link" link="#" body='consectetur'></lib-ds-links></p>

<lib-ds-links className="external" link="#" body='External link default' target="_blank" ariaLabel="External link default (Opens in new tab)"></lib-ds-links>

<p>Lorem ipsum dolor sit amet, <lib-ds-links className="external" ariaRole="link" link="#" body='External link default' target="_blank" ariaLabel="External link default (Opens in new tab)"></lib-ds-links></p>

HTML

<script src="[JS-PLACE-HOLDER]"></script> 

<a href="#">Link Text</a>

<a role="button" href="#">Link Text</a>

Guidelines

Keyboard interaction

When the link has focus, the Enter key activates the link.

Buttons vs. links

It's important that both the appearance and role of a component match the function it provides. Links are used to direct the user somewhere. Buttons are used to carry out an action. 

When elements have the visual style of a button but perform the actions of a link (or vice versa), giving that element a link role helps assistive technology users understand its function and predict its expected behaviour.

Screen readers

In addition to reading links in the context of a full page, screen reader users can also access a collected list of the links on that page. This list can be traversed quickly and sorted in several ways (for example, alphabetically). Because this list separates a link from its original context, it's critical that any link text is unique from similar links and provides enough information on its own to support being quickly navigated.

For a better experience, avoid ambiguous link text like ‘Click here’ or ‘Read more,’ which don't provide enough information when separated from the page’s full context. If these kinds of link texts can't be avoided, the experience can be improved for screen readers in one of the following ways:

• Override the visible link text with one that uses the aria-label attribute. The attribute will take a string input, which will be the link text for assistive technology users. Make sure that the aria-label string starts with the same visible link text.
• Append the link text with added context using off-screen text (visibly hidden using CSS).

Testing

When testing a link, the tester must ensure:

• The link is fully keyboard operable.
• Indications for the focused and the hovered states are clear and prominent.
• The link is used properly (in other words, it goes somewhere).
• Inline links have an underline.
• Standalone links take an underline on hover or focus.
• Link text has a minimum colour contrast of 3:1 with its surrounding body text and 4.5:1 with its background.
• External links are indicated by an adjacent icon and that this visual information is announced by the screen reader (for example, “opens in a new window”).
• Links that initiate a download have a visible indication (text or icon). The screen reader announces both the link text and the indication that it will initiate a download.
• The link text provides enough context to the user about its target and purpose.
• Ambiguous links have off-screen text which provides enough context to the screen reader user to understand its target and purpose.
• The screen reader announces the role of a link.

Related content

• Buttons
• Breadcrumbs
• Pagination