Skip to main content

Links & Buttons

Links are clickable references to another page in the site or to an external website. Buttons are a style for a "call to action" link.
Links

What do links look like?

Regular text links are blue and underlined. Visited links are a slightly darker shade of blue. These link styles happen automatically when you insert a link to a file, internal or external page.

If you want to point to closely related content, use a link.

The kinds of content that work best in links are:

  • documents that supplement the webpage topic 
  • internal pages or external websites that are related to the topic
  • email addresses

You can have a link in the main body of your webpage or in the right margin, in a feature box (see How-Tos: Feature Boxes and Organizing your content: Feature boxes.)

Best practice

To follow PHSA style for links:

  • Make sure that link and button text is short and descriptive. Do not use "click here" as the text for a link; this will not help search engines find your content.
  • Be sure to fill in the description (also known as a tooltip).
  • Keep the description (also known as a tooltip) between 5 and 15 words. 
  • Make the description (also known as a tooltip) meaningful to the website visitor, for example: the name of the website or content that you are sending them off to, such as: PHSA website, Directions & parking, MSP page on the Ministry of Health website. Sometimes the tooltip can be the same as the text you've highlighted on the page (see Accessibility & Alt Text).
  • Add "opens in a new window." All external links should open in a new window –  having this in the tooltip lets the visitor know that they won't lose their place on the page.
  • A link on its own line does not have a period at the end
  • An inline link (a link within a sentence) may be followed by a period. (The period is not part of the link.)

PHSA websites don’t use anchor links (links on a page to another place on the same page). 


The idea is to structure the page with tabs and accordions so that visitors can see headings for all the content at a glance when they open the page, or to describe where the content is on the page. 


It’s better to lay out the page so that content is easily found, and to point to a specific place with words, so the visitor knows what to look for when they get to the page. 


When writing a cross reference (a link to another place on the page), give:

  • the exact subheading or tab heading or accordion panel title that has the content

  • an idea of where to find the content on the page or what type of content to look for, if needed

  • the page title, linked to the url for that page (if linking to another page) 

Examples 

  • See the Bookstore booklets tab. 
  • See the Referrals section. 
  • See the Voiding Diary handout under the Quick links section.
  • See Puberty hormones in Endocrine Conditions
  • See the Resources section at the bottom of the Hearing Problems page. 

The rationale for not using anchors

Here’s a bit more information about anchors, and the rationale for not using them.


According to usability experts, anchors should be avoided unless content really requires it. With PHSA’s new website templates, most text can be accommodated better within accordions, tabs, or web parts, therefore eliminating the need for anchors. Anchors:

  • are only required on extremely long pages, which should be avoided where possible 

  • can add visual clutter 

  • can look dated on new websites

  • can affect a browser’s navigation buttons

“One major problem with “top” links is that they have an impact on the browser’s navigation buttons and as such pollute the browsing history. 


Because “top” links are anchors just like any other links, clicking on the browser’s “Back” button will take users to the foot of the page they are currently viewing, not to the previous page. 


On top of that, accessibility experts claim that “Back to top” links may disrupt the use of speech-based user agents, that the “top” concept is vague and that “Back to top” links are not used consistently across websites.” 


This information is from “Back to Top” links considered harmful (from the free information site IT and communication by Jukka "Yucca" Korpela).

 
 

Buttons

What does a button look like?

Our websites have two styles of buttons:

  • multicoloured button – in agency's main and secondary colours
  • single-colour button – in agency's main colours
buttons.JPG

Why use a button?

If you have a specific action that you want your webpage visitor to perform, use a button. A button is a "call to action." 

The kinds of content that work well in a button are:

  • links to forms
  • links to surveys or other votes
  • feedback
  • content that the visitor needs in order to understand the webpage topic, such as guidelines or a handbook

Best practice

To follow PHSA style for buttons:

  • You can put a button in the body text or the right margin, but use only one button on a page. 
  • Make the button text short and snappy and descriptive (don't use "click here").
  • If the only content in your right margin is a button, use a multicoloured button and remove the colour bar from your feature box (see How-Tos: Feature Boxes) to avoid a too-busy design. 

Tab Heading
Tab Heading
SOURCE: Links & Buttons ( )
Page printed: . Unofficial document if printed. Please refer to SOURCE for latest information.

Copyright © Provincial Health Services Authority. All Rights Reserved.

    Copyright © 2017 Provincial Health Services Authority.