Links

Guidance

Text links must always be underlined, colour alone is not enough of a visual cue for users to identify links. The only exception to this rule is links in navigation areas and footers. They don’t need to be underlined because their location indicates their function.

Reference: WCAG 2.2 Success Criterion 1.4.1 Use of Color

Link style

Inline links inherit most of their styling from the text they are applied to. However, we add an underline and a bit more font weight to paragraph text to help distinguish it as a link. Never underline text that isn't a link.

<h3><a href="#">Headling link</a></h3>
<p>Lorem ipsum dolor, <a href="#">link in a paragraph</a>.</p>

How to write meaningful link text

The best way to test that link text accurately describes where they lead is to remove all the other text on the page and read just the link text—do we still know where we’ll go?

Meaningful link text should:

• describe the content you’re linking to
• never say things like “Click here” or “Tell me more”
• not include the punctuation if it comes at the end of a sentence or before a comma

Reference: WCAG 2.2 Success Criterion 2.4.4: Link Purpose

Links vs. buttons

There is a semantic difference between links <a> and buttons <button>. As a rule, if it takes you to another page - it should be a link, if it performs an action (like submitting data) it should be a button. There are times when it is okay to present a link <a> styled as a <button>:

• when it is the primary call to action on a page (link to register)
• when the link leads to an online service or application

Apply the button component classes to your link to style it.

Linking to files

Include the file type and file size in your link text. This will help users understand the type of file they are downloading and the amount of data they will be using, which is particularly important for users on mobile devices with limited data plans.

<a href="#">Document name (PDF 1.5 MB)</a>

Linking to external websites

When linking to external websites, use an external link icon to clearly indicate to the user that they will be leaving the website or application. This helps to prevent confusion. The icon is placed adjacent to the link text using the .external-link class. Make sure the link text accurately describes the destination of the external link. This provides users with the context required to make an informed decisions about whether they want to leave the website or not.

<p>For information, visit <a class="external-link" href="#">myhealth.gnb.ca</a>.</p>

Links that open a new window

As a best practice in user experience design, links within content should always open in the same window to prevent disorientation and confusion for the user. However, in cases where a user may lose information by leaving the current page, it is acceptable to open a link in a new window, as long as the link text clearly indicates this action to the user. Note that not using the target allows the user to decide whether a new window should be opened or not.

Reference: WCAG 2.2 Technique H83

<a href="#">Get help (opens a new window)</a>

Anchor links

Anchor links are used to link to sections of content within a page. We use anchor links in our page nav. It's important to remember that using too many anchor links on a page can be disorienting for users.

We recommend using numbers for anchor IDs to reduce the risk of error when content is translated.

<!-- Anchor link -->
<a href="#1">Overview</a>
<!-- Anchor ID applied to a section heading -->
<h2 id="1">Overview</h2>

Linking to an email addresses

Make the email address an active link. Don’t label the email address with "Email:" or include any punctuation that's not part of the address.

Basic email addresses should be lower case, more complex email addresses (ProgramName-NomDuProgramme@gnb.ca) might benefit from using initial caps to make it easier to understand.

<a href="mailto:">program@gnb.ca</a>

Linking to telephone numbers

Make telephone numbers an active link to make it easier for users to call directly, instead of having to select, copy and paste the number. When linking to a TeleTYpe (TTY) number, ensure that you explicitly mention (TTY) in your link text to indicate it's intended for TTY devices.

<a href="tel:506-455-1088">506-455-1088</a>