Links

Text links must always be underlined, colour alone is not enough of a visual cue for users to identify links.

Links in navigation areas and footers don’t need to be underlined because their location indicates their function.

Reference: WCAG 2.1 Common Failure F73

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

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?

For information about social distancing guidelines click here.

Reference: WCAG 2.1 Success Criterion 2.4.4: Link Purpose

Buttons vs links

There is a semantic difference between links <a> and buttons <button>. As a general rule, if it takes you to another page - it should be a link, if it performs and 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 (example: program start pages)
  • when you are linking to an online service or application

Apply the button pattern classes to a link <a> to style it:

Start now

btn-a-start.html

Email addresses

Write email addresses in full, in lowercase and as active links. Don’t include any other words as part of the link.

Don’t label email addresses with “Email:” or include any punctuation that’s not part of the address.

Use our email obfuscator tool to prevent email addresses on your pages from being scraped and targeted with spam.

Links to files

When linking to files include the file type and file size in brackets. This lets the user know that the link goes to a file, and showing the file size is important to our growing share of users who access government programs and services from mobile devices. No one wants to accidentally download a 5 MB PDF file on their phone!

Make sure the file type and file size are part of the link text, you'll want screen readers to have this information too.

When to open links in a new window

As a general rule, links in content should never open in a new window. Opening new window that were not requested by the user can be disorienting and create confusion because it renders the back button useless.

If a user is in an application or service process where information could be lost, opening a link to supporting information in a new window is okay as long as users are informed with link text indicating that the link will open in a new window.

Reference: WCAG 2.1 Technique H83