Government of British ColumbiaGovernment of British Columbia

DevHub

beta
Resource Information

Status

Last Updated: February 11, 2019

Links

Links lead users to a different page.

Example

Don't Use This when:

  • Users need to take an action on a page such as log-in or submit, use a primary button instead.

Design Guidance

  • If your link is at the end of a paragraph or sentence make sure the linked text does not include the full stop.
  • Links should be describe where it leads to
  • Do not put links in words such as "Link", "Here", or "Click Here". Learn more about descriptive links
  • Links should not open a new tab or window. If so they need to have the relevant icon to give the user advanced warning. Example below:
<a href="knitting.html" target="_blank">Application Portal (opens in new window)</a>

Behaviour

  1. On hover link removes underline and turns to blue.

Accessibility

This checkbox has been built according to WCAG 2.0 AA standards and all government services should strive to meet this level. This component successfully includes the following accessibility features:

Screenreaders

As read using ChromeVox

"This is an example of a link to access your application, internal link."

"Here is another example of a link to apply, internal link."

"Link, internal link."

Colour Contrast

Conveying Information

  • Underline allows users to identify the link without relying on colour alone
  • Underline dissapears on hover indicating link is clickable

Code

HTML

    <p>This is an internal example of a link to <a href="#">access your application</a>.</p>
    <p>Here is another example of an internal link to <a href="#">apply</a>.</p>
    <p>This is an example of an <a href="#">External Link</a> <i class="fas fa-external-link-alt"></i></p>

CSS

body {
  font-family: ‘Noto Sans’, Verdana, Arial, sans-serif;
  font-size: 18px;
}

a {
  color: #1a5a96;
}

a:hover {
  text-decoration: none;
  color: blue;
}

i {
  color: #1a5a96;
}