Rescinded [2011-09-28] - Common Look and Feel Standards for the Internet, Part 3: Standard on Common Web Page Formats
This page has been archived on the Web
Information identified as archived is provided for reference, research or recordkeeping purposes. It is not subject to the Government of Canada Web Standards and has not been altered or updated since it was archived. Please contact us to request a format other than those available.
Effective date
This standard comes into effect on January 1, 2007, and replaces the following Treasury Board Common Look and Feel Standards and Guidelines for Internet:
- Standard 2.2 - Symbols and Hyperlinks;
- Standard 5.1 - Important Notices Link;
- Standard 5.2 - Copyright Notice;
- Standard 5.3 - Privacy Notice;
- Standard 5.4 - Personal Information;
- Standard 6.1 - Common Menu Bar;
- Standard 6.2 - Institutional Menu Bar;
- Standard 6.4 - Date Indicator;
- Standard 6.7 - Web Analyzer Tools; and
- Standard 7.3 - "Canada" Wordmark and Signature
- Guideline 5.1 - Third-party Information Notice; and
- Guideline 5.2 - Crown Copyright Symbol.
Application
This standard applies to institutions listed in Schedules I, I.1 and II of the Financial Administration Act.
Related policies
The institution must also apply the following policy instruments:
- Common Look and Feel Standards for the Internet, Part 1: Standard on Web Addresses;
- Common Look and Feel Standards for the Internet, Part 2: Standard on the Accessibility, Interoperability and Usability of Web sites; and
- Common Look and Feel Standards for the Internet, Part 4: Standard on Email.
The institution must also respect the obligations set out in the:
- Access to Information Act;
- Privacy Act;
- Policy on Privacy and Data Protection;
- Privacy Impact Assessment Policy;
- Official Languages Act;
- Policy on the Use of Official Languages for Communications with and Services to the Public;
- Directive on the Use of Official Languages on Web Sites;
- Directive on the Use of Official Languages in Electronic Communications;
- Communications Policy of the Government of Canada;
- Federal Identity Program Policy; and
- TBITS 39: Treasury Board Information Management Standard, Part 1: Government On-Line Metadata Standard.
Context
The Internet provides excellent opportunities for Canadians to obtain information on Government of Canada programs and services when and where they need it, in accessible formats and in the official language of their choice. Web sites are key enablers of the government's duty to inform the public and to offer improved service to Canadians. A consistent look and feel for all Web sites enhances recognition of Government of Canada sites and increases general confidence in the information Canadians receive from their government online. This consistency also makes navigating through government information much easier.
Creating a "common look and feel" for an extended family of related Web sites holds enormous challenges. The programs and services offered by Government of Canada institutions are incredibly diverse and each may serve a specific purpose, for a particular audience. In some cases, the purpose of a site may be strictly to provide information; in others it may facilitate delivery of a particular service. This standard is balanced so as to maintain an appropriate degree of consistency while giving institutions the freedom they need to develop Web pages that serve a variety of functions.
Developing a Web site is not a one-time effort: well-designed sites are continuously evolving. Revisions are prompted by visitor feedback, better understanding of usage patterns, clearer focus of communications objectives, development of new material, modifications to existing documentation, and new interactive options. In the same way, the Standard on Common Web Page Formats will continuously evolve.
Accountability
Deputy heads are accountable for implementing this standard in their institutions.
Requirements
1. Welcome Page elements
The institution ensures effective initial communication, identification and navigation on Government of Canada Web sites through the incorporation of a Welcome Page at the main point of entry to the site. Where a Welcome Page is used at a sub site level, it must equally conform to this requirement. The Directive on the Use of Official Languages on Web Sites sets out requirements for the elements related to official languages that must appear on the Welcome Page and Appendix A of the Federal Identity Program policy specifies the order. This requirement specifies the presentation of these mandatory elements.
1.1 "Canada" wordmark and signature
The "Canada" wordmark must appear in the lower right display on Welcome Pages.
The institutional signature must appear in the upper left display on Welcome Pages. The order of the official languages is prescribed by the location of the office providing the service through the site in question, that is French on the left for an office or facility located in Quebec, and English on the left for an office or facility located elsewhere in Canada in conformance with the principles in Appendix A of the Federal Identity Program policy.
In accordance with the Federal Identity Program (FIP), institutions must be identified on all visual identity applications by either the signature of the Government of Canada or the institution, and the "Canada" wordmark. All institutional web pages and downloadable documents must display both symbols in accordance with FIP policy and standards and as prescribed in the Common Look and Feel Standards.
1.2 Dimensions and page structure
The dimension and page structure of the Welcome Page must follow the specifications described in requirements 1.2.1 to 1.2.12.
- 1.2.1 The page must display in the centre of the browser window with the background colour of the main content area set as white (#FFFFFF).
- 1.2.2 The colour of the open space surrounding the Web page must be set at white (#FFFFFF).
- 1.2.3 The page width is 760 pixels.
- 1.2.4 All content must be visible at 800 pixels by 600 pixels resolution without scrolling.
- 1.2.5 The page must have left and right margins of 80 pixels.
- 1.2.6 The page must have top and bottom margins of 20 pixels.
- 1.2.7 The institutional signature, institutional message space, language choice links, "Important Notices" link and "Avis importants" link are left aligned.
- 1.2.8 The institutional message space must have a dimension of 600 pixels wide by 250 pixels high.
- 1.2.9 The language choice links (as specified in requirement 1.4) are positioned 30 pixels below the institutional message space, presented side by side with a 30 pixel separation at the normal text size (100%) and to the left of the "Canada" wordmark.
- 1.2.10 The top edge of the "Canada" wordmark must be aligned with the top edge of the language choice links and its right edge must be aligned with the right margin of the page.
- 1.2.11 On the Welcome Page of a bilingual site, links to "Important Notices" and "Avis importants" must be displayed under and aligned with the left edge of the corresponding language choice links.
- 1.2.12 On the Welcome Page of a unilingual site, a link to "Important Notices" (unilingual English) or "Avis importants" (unilingual French) is positioned under and aligned with the left edge of the bilingual message regarding content in only one language.
1.3 Institutional message space
The institution must add either:
- an image measuring 600 pixels wide by 130 pixels high. The background image must be positioned directly above a rectangular field measuring 600 pixels wide by 120 pixels high with an introductory text in the foreground.; or
- a background image measuring 600 pixels wide by 250 pixels high with introductory text in both official languages.
The institution must ensure a high level of contrast, when viewed by someone having colour deficits or when viewed on a black and white screen, between the background colour or image and the text elements.
As specified by the World Wide Web Consortium's Web Accessibility Guidelines, conformance to which is required in the Common Look and Feel Standards for the Internet, Part 2: Standard on the Accessibility, Interoperability and Usability of Web sites, header elements must be used to convey document structure and must be used according to specification. However, due to the bilingual content of the Welcome Page, an <h1> heading must be used for the introductory text in both official languages described in (a) and (b) above, with lower level headings used in sequential order as required. The institution may set the appearance of the heading text but the size must correspond to the position in the heading hierarchy, that is the <h1> text is larger than <h2> and so on.
1.4 Language
1.4.1 Bilingual sites
The order of the official languages on a bilingual Welcome Page is determined by the location of the office or facility providing the service, as prescribed in Appendix A of the Federal Identity Program Policy, that is, French on the left for an office or facility located in Quebec, and English on the left for an office or facility located elsewhere in Canada. The prescribed order must be respected on the Universal Resource Locator (URL) line and in the treatment of alternative text ("ALT text"). The language that is given precedence is to be set as the language type of the page. Language attributes (lang and xml:lang) must be used each time the language of the text is different from the language of the page.
Bilingual sites must provide links to "English" and "Français" that are represented as white text (#FFFFFF) as a default on a rectangular field of 120 by 30 pixels at the normal text size (100%) with a background colour of red (#FF0000) as a default and a 2 pixel border with the colour of #FF6666 for the top and left borders and the colour #CC3333 for the bottom and right borders. Effects must not be used to change the appearance or the behaviour of the text or cell. Detailed dimension drawings of bilingual Welcome Pages are provided in Appendix A.
1.4.2 Unilingual sites
Unilingual sites must provide a link to "Enter" on a unilingual English site and "Entrer" on a unilingual French site. This link must be represented as white text (#FFFFFF) as a default on a rectangular field of 120 by 30 pixels, at the normal text size (100%), with a background colour of red (#FF0000) as a default and a 2 pixel border with the colour of #FF6666 for the top and left borders and the colour #CC3333 for the bottom and right borders. Effects must not be used to change the appearance or the behaviour of the text or cell. In addition, the mandatory bilingual message required by the Directive on the Use of Official Languages on Web Sites, informing site visitors that the site provides information in only one language must be placed directly below the "Enter" or "Entrer" link. Detailed dimension drawings of unilingual Welcome Pages are provided in Appendix B.
1.4.3 Multilingual sites
On sites or sub sites offering substantial content in languages other than Canada's official languages, the Welcome Page must provide links to "English" and "Français" as specified for bilingual Welcome Pages, and additional links to the alternate language(s), with the link text displayed in the language and character set of the other language(s). The link must be represented as red text (#FF0000) as a default on a rectangular field of 120 by 30 pixels, at the normal text size (100%), with a white background (#FFFFFF) as a default. Effects must not be used to change the appearance or the behaviour of the text or cell. If the site or sub site offers only limited content in an alternate language, a standard bilingual Welcome Page must be used and the alternate language content treated within the main site content. Detailed dimension drawings of multilingual Welcome Pages are provided in Appendix C.
2. Content page dimensions and layout
The institution ensures that content is easy to understand by providing a well-structured layout.
2.1 Page dimensions
The width of the content page, including its header and footer, is set at 760 pixels. In exceptional cases where specific content, including maps, large tables, charts, and graphs cannot adjust by way of wrapping to the standard 760 pixel width or by altering the content and its structure, the content may be extended to the right. When this occurs, site visitors must be informed that the content area is larger than usual.
2.2 Page layout
The content area of all Government of Canada Web pages, other than Welcome Pages and Server Message pages, must be centered in the page and presented in one of three designs: a three-column layout, a two-column layout, or a one-column layout. The specifications for implementation and application of each design are outlined below.
2.2.1 Three-column layout
The institution's primary menu page and all sub site menu pages must apply a three-column layout with the following dimensions: 150 pixels for the left column, 405 pixels for the middle column, and 195 pixels for the right column, with a 5 pixel padding between the columns. The institution has the option of repeating this three-column layout on some or all of its Web pages, but it also has the flexibility to expand the content area by implementing a two-column format on secondary pages.
2.2.2 Two-column layout
Most secondary content pages are well suited to the two-column page layout that allows for left menu navigation and a large area where content is presented. Where implemented, the two column layout must have the following dimensions: 150 pixels for the first column and 605 pixels for the second column, with a 5 pixel padding between the columns, for a total width of 760 pixels.
2.2.3 One-column layout
In exceptional cases, content that cannot be made to fit in the two-column layout by adjusting its format or structure may be displayed in a single-column layout with a total width of 760 pixels.
2.3 Background
All pages must be displayed in the centre of the browser window. The background colour of the 760 pixel wide page must be set as white (#FFFFFF). The institution may apply an optional coloured background using a colour in the Web Smart palette in the open space surrounding the Web page to complement its institutional colour scheme. Images must not be used for the optional background.
2.4 Header structure
As specified by the World Wide Web Consortium's Web Accessibility Guidelines, conformance to which is required in the Common Look and Feel Standards for the Internet, Part 2: Standard on the Accessibility, Interoperability and Usability of Web Sites, header elements must be used to convey document structure and must be used according to specification. A first level heading must be used for each major document structure within a page, with lower level headings used in sequential order to identify the major sections and to clarify the hierarchical structure. For example, the common menu bar, side menus and content area on main pages all constitute major document structures and so must each have an <h1> tag, with lower level headings used to identify the major sections.
Heading markup must be used to provide appropriate document structure and must not be used solely for the purpose of controlling the appearance of text. The institution may set the appearance of the heading text but the size must correspond to the position in the heading hierarchy, that is the <h1> text is larger than <h2> and so on.
2.5 Font
The default font for text elements in the content area and side menu(s) specified using a Cascading Style Sheet is Verdana. These elements must be presented with foreground and background colour combinations that achieve high contrast when viewed by someone having colour deficits or when viewed on a black and white screen.
2.6 Printer friendly versions
Printer friendly versions of Web pages must include the "Canada" wordmark and the institutional signature at the top of the page as specified in requirement 3 and the content currency indicator at the end of the text as specified in requirement 13.2.
The Federal Identity Program (FIP) governs the use and display of the official symbols of the Government of Canada. FIP requirements and standards ensure the identity of the government is applied consistently across dozens of corporate applications, both internal and external to government.
The content date indicator is important to inform visitors of the currency of the content, especially when it is printed and may be accessed out of context.
3. "Canada" wordmark and institutional signature
All Web sites under the responsibility of the institution are identified in strict accordance with the Federal Identity Program. The Canada wordmark must appear in the upper right position on all content pages. The Government of Canada signature or the institution's signature must appear in the upper left position. Under no circumstances may the official symbols of the Government of Canada be hyperlinked.
Where Web sites are produced by institutions that have been exempted from the Federal Identity Program, or sites represent collaborative or partnering arrangements with institutions, organizations or other jurisdictions, guidance on the use of official symbols must be sought from the institution's head of communications or designated Federal Identity Program coordinator.
4. Banner
The institution reinforces common design principles by applying an institutional banner to all pages except Welcome Pages and Server Message pages.
Detailed dimension drawings of the banner are available in Appendix D.
4.1 Maple leaf
The common red maple leaf image must appear on each banner.
- 4.1.1 The leaf must be 65 pixels high and 65 pixels wide.
- 4.1.2 The leaf must overlay the banner background, with the top 35 pixels of the leaf image extending above the background.
- 4.1.3 The top of the leaf must be placed 5 pixels below the bottom of the final text in the institutional signature.
- 4.1.4 The stem of the leaf must be centered on the page, 380 pixels from the left border of the page.
The common red maple leaf image is available in the CLF Toolbox.
4.2 Banner background
The banner background must be implemented using either a background colour or a background image.
4.2.1 Background colour
Where the institution implements a background colour, it must achieve high contrast.
4.2.2 Background image
Where the institution implements a background image, it must conform to the constraints described in requirements 4.2.2.1 to 4.2.2.3.
- 4.2.2.1 The file size is kept to a minimum to allow the page to load quickly for users without high speed Internet access.
- 4.2.2.2 The visible portion of the image must be no more than 760 pixels wide by 80 pixels high at the normal font size (100%).
- 4.2.2.3 The colours used in the image must achieve high contrast, when viewed by someone having colour deficits or when viewed on a black and white screen.
4.3 Multimedia elements
Multimedia elements respect the banner dimensions and do not interfere with the reading of the text with and without adaptive technologies. Multimedia elements respect photosensitivity. In situations where multimedia support is not enabled or available on the site visitor's system, the site visitor must still be able to read the foreground text with and without adaptive technologies.
4.4 Text
4.4.1 First line of text
For institutional sites, the first line of text must display the institution's applied title and conform to the specifications set in requirements 4.4.1.1 to 4.4.1.5.
For sites relating to a marketing campaign or government initiative as well as collaborative and multidepartment sites, the first line of text must conform to the specifications set in requirements 4.4.1.3 and 4.4.1.5.
- 4.4.1.1 The default font face is Times New Roman, with sans serif treatment specified for the alternate font.
- 4.4.1.2 The default font colour is white (#FFFFFF).
- 4.4.1.3 The text is centered in the banner.
- 4.4.1.4 The text is presented in mixed case.
- 4.4.1.5 The text must not be hyperlinked.
4.4.2 Second line of text
For institutional sites, the second line of text must display the institution's primary Web site URL and conform to the specifications set in requirements 4.4.2.1 to 4.4.2.5.
For sites relating to a marketing campaign or government initiative as well as collaborative and multidepartment sites, the second line of text must conform to the specifications set in requirements 4.4.2.3 and 4.4.2.4.
- 4.4.2.1 The default font face is a smaller Arial font, with sans serif treatment specified for the alternate font.
- 4.4.2.2 The default font colour is white (#FFFFFF).
- 4.4.2.3 The text is centered in the banner.
- 4.4.2.4 The text must not be hyperlinked.
- 4.4.2.5 Where the institution employs a registered domain name that represents its primary purpose in both official languages, for example, infrastructure.gc.ca or agr.gc.ca, the second line of the banner on both English and French pages shall display the same URL. Where the institution chooses to pair abbreviations or names, for example, tbs-sct.gc.ca and sct-tbs.gc.ca, the order of the languages is determined by the language of the page. Where the institution has registered two pairings of unilingual domain names, for example, pwgsc.gc.ca and tpsgc.gc.ca, each domain name is displayed according to the language of the page.
4.4.3 High level of contrast
The institution must ensure a high level of contrast, when viewed by someone having colour deficits or when viewed on a black and white screen, between the background colour or image and the text elements.
5. Common menu bar
The institution contributes to consistent and predictable navigation on all Government of Canada Web sites by consolidating key functions in the form of a common menu bar that must appear on every page of its Web site except Welcome Pages and Server Message pages.
5.1 Bilingual Web sites
On bilingual Web sites, the menu bar must contain six links arrayed from left to right in the following order on English language pages: Français, Home, Contact Us, Help, Search, canada.gc.ca; and in the following order on French language pages: English, Accueil, Contactez-nous, Aide, Recherche, canada.gc.ca. Detailed dimension drawings of bilingual content pages are provided in Appendix D.
5.2 Unilingual Web sites
On unilingual Web sites, the language selection link is replaced with "Avertissement" on English pages and "Notice" on French pages. All other links are supplied as listed in requirement 5.1. Detailed dimension drawings of unilingual content pages are provided in Appendix E.
5.3 Sites offering content in other languages
On sites offering content in languages other than Canada's official languages, both the English and French menu bars must be presented. Detailed dimension drawings of multilingual content pages are provided in Appendix F.
5.4 Specifications
The menu bar must conform to the specifications listed in requirements 5.4.1 to 5.4.7.
- 5.4.1 The total width is 760 pixels.
- 5.4.2 Each navigation link must be represented with white text (#FFFFFF) as a default. The links must be presented in scalable text. The text must be left aligned. The default font face is Verdana specified using a Cascading Style Sheet, with sans serif treatment specified for the alternate font. The minimum font size is equivalent to 9 points.
- 5.4.3 All navigation links must be on a rectangular field of 126 pixels by 20 pixels except for the right-most link, which must be 125 pixels by 20 pixels, at the normal text size (100%).
- 5.4.4 The background of each field must be black (#000000) as a default.
- 5.4.5 A 1-pixel space separates each link field.
- 5.4.6 Effects must not be used to change the appearance or the behaviour of the text, the cell or the menu bar.
- 5.4.7 Graphical buttons must not be used.
5.5 Behaviour of links on secure sites and Web application pages
In the case of a secure section of a site or a Web application, where navigating away from a page will cause the site visitor to lose information inputs or access, the links from the common menu bar must direct to an interstitial notification page where the site visitor is informed of the repercussions of leaving and can then choose to continue to the intended destination or return to the previous page.
A sample notification page is provided in the CLF Toolbox.
5.6 Absence on downloadable versions of documents
In the case of downloadable versions of documents on Web sites that are in non-XHTML formats, including .DOC, .RTF, .PDF, .TXT, .WPD, the implementation of the common menu bar is not required; however, the requirements relating to official languages and the Federal Identity Program must be respected.
5.7 Prohibition of institutional menu bars
The institution must not implement secondary or institutional menu bars on its Web sites.
5.8 Language link
The Français / English link must point to a page where site visitors access identical information in the other official language. In the case of unilingual sites, the initial link points to a page explaining that the site is unilingual and how to access the same information in the other official language as required by the Directive on the Use of Official Languages in Electronic Communications. On multilingual sites, the Français and English links allow site visitors to access identical information in each official language. Change language scripts are available in the CLF Toolbox.
5.9 Home
The "Home" link must point to the main page of the institution's Web site or to the main menu page on portals, gateways and clusters.
5.10 Contact Us
The "Contact Us" link must point to the institution's primary contact page. For portals, gateways, clusters and other interdepartmental initiatives, "Contact Us" must link to the same page throughout the site. Where available, links to contextual contact information may be offered from the institution's primary contact page and from the left/right menu and/or the content area.
Sample Contact Us pages are provided in the CLF Toolbox.
5.11 Help
The "Help" link must point to the institution's primary help page. Where available, links to contextual help information may be offered on the institution's primary help page and in the left/right menu and/or the content area.
On the primary help page, the institution must provide an overview of any accessibility features available on the Web site. Where the Government of Canada CLF 2.0 Common Template is used, a link must be provided to the client-side CSS files that allow site visitors to over-ride visual formatting in the template. The client-side CSS files are available in the template package in the CLF Toolbox.
Sample Help pages are provided in the CLF Toolbox.
5.12 Search
The "Search" link must point to the primary institutional search page. Where available, contextual search links may be offered from the institution's primary search page and from the left / right menus and / or the content area.
Where the institution is unable to provide search functionality, the Search link must point to a page that explains that the functionality is unavailable and provides a link to the Canada Site search engine.
Sample Search pages that demonstrate good layout and assistive text are provided in the CLF Toolbox.
5.13 canada.gc.ca
The "canada.gc.ca" link must point to the menu page of the Government of Canada's Web portal in the site visitor's chosen official language.
6. Contact Us page
The institution implements a Contact Us page that respects the public's right to provide feedback on policies, programs, services and initiatives as outlined in the Communications Policy of the Government of Canada and ensures that electronic communications conform to the requirements of the Official Languages Act, the Access to Information Act, the Privacy Act and the relevant Treasury Board policies, including the Official Languages Policies, Policy on the Management of Government Information and the Privacy and Data Protection Policy.
The Contact Us page provides a means for site visitors to send electronic mail and to find the information necessary to contact the institution through other channels, including by telephone, teletypewriter, facsimile telephone and civic and postal addresses. The institution must provide relevant contact information, including information that could assist individuals with disabilities or special needs.
Where available, service standards must be provided to site visitors so that they understand the process and know what to expect when requesting service. The institution must provide links to frequently requested material or resources, such as frequently asked questions, site maps, A to Z indices, and employee directories.
Personal information collected via email and Web forms is subject to the Privacy Act. Refer to requirement 12 for details on the personal information collection statement. Web site visitors must also be reminded that, unless otherwise identified, these are not secure forms of transmission and therefore they must not transmit sensitive personal information.
6.1 Acknowledgement of correspondence
The institution must ensure that electronic correspondence is acknowledged in a timely manner. When site visitors successfully submit a contact form, they must be informed that the comment has been received, and this is easily achieved through a Web page. When site visitors contact the institution through one of its generic email accounts, automatic acknowledgement must be sent indicating that their correspondence has been received. The response to the email is prepared at the discretion of the institution.
When site visitors contact an employee of the institution directly, there is no requirement for an auto-acknowledgement, as site visitors can follow up directly if a response is not forthcoming and are automatically notified if their email cannot be delivered for some technical reason.
7. Navigation path
To improve the navigation of its Web site and enhance understanding of the place of a particular document within the site, the institution must provide a navigation path or "breadcrumb trail" immediately below the common menu bar on all Web pages except Welcome Pages and Server Message pages.
- 7.1 The default font for the text elements in the breadcrumb trail is Verdana specified by a Cascading Style Sheet, with sans serif treatment specified for the alternate font.
- 7.2 Links in the breadcrumb trail must be separated by a space, the greater than relational operator (>), followed by another space.
- 7.3 Links must make sense on their own when encountered by screen readers.
- 7.4 Acronyms and abbreviations must be either spelled out or marked up using the HTML acronym or abbr element.
It is recognized that some institutions will face technical challenges with implementing a breadcrumb trail. For that reason, and as an interim measure, the institution is permitted to post new and redesigned sites that comply with all other requirements of this standard as it develops a suitable breadcrumb trail solution. This interim compliance measure expires on December 31, 2008, by which date a breadcrumb trail must be available on the institution's Web pages, as specified above.
8. Left menu
The institution must provide navigation in the left menu on every content page created using the three-column and two-column page layout specified in requirement 2.2 to ensure Web site visitors can easily locate the information they seek.
- 8.1 The default font for all text elements is Verdana specified by a Cascading Style Sheet, with sans serif treatment specified for an alternate font.
- 8.2 Headings and navigation links must be in scalable text exclusively.
- 8.3 Graphical buttons and decorative items, for example, bullets based on images and other non-informational elements, must not be used.
- 8.4 All text must be displayed in a foreground/background colour combination that achieves high contrast when viewed by someone having colour deficits or when viewed on a black and white screen.
- 8.5 Non-text elements must only be placed below the final navigation link.
9. Right menu
The institution must provide content in the right menu on every content page created using the three-column page layout specified in requirement 2.2 to ensure site visitors have quick access to links to key institutional resources from all main and sub site menu pages.
The default font for text elements in the right menu is Verdana specified by a Cascading Style Sheet, with sans serif treatment specified for an alternate font. All text must be displayed in a foreground/background colour combination that achieves high contrast, when viewed by someone having colour deficits or when viewed on a black and white screen. Content is featured in the right menu at the institution's discretion.
10. Proactive Disclosure
To facilitate the Government of Canada's commitment to transparency and accountability, the institution must provide a link entitled Proactive Disclosure as the last item of the left menu on all main and sub site menu pages. The link points to the institution's Proactive Disclosure reporting page. For portals, gateways and clusters, the link points to the Government-Wide Reporting site. [www.tbs-sct.gc.ca/pd-dp/gr-rg/index-eng.asp]
11. Third-party symbols and hyperlinks
To avoid the appearance or public perception of endorsing or providing a marketing subsidy or an unfair competitive advantage to any person, organization or entity outside of government, and to not advertise or publicly endorse the products or services it purchases or obtains from the private sector under contract, the institution conforms to the requirements of the Communications Policy of the Government of Canada by not displaying third-party icons, symbols or logos that represent the products and services of private enterprises or individuals, apart from exemptions made within the context of partnering and collaborative arrangements and the use of Treasury Board approved symbols for government-wide use. Where links to third-party sites are required, a simple text hyperlink must be employed.
For further guidance on hyperlinking, consult Common Look and Feel Guidelines for the Internet, Part 2: Guideline on Hyperlinking.
12. Personal information collection
Every institution that is subject to the Privacy Act must ensure that each collection of personal information conforms to the requirements of that act. The requirements apply equally to electronic collections as they do to paper-based collections. Any time personal information is collected electronically, individuals must be properly informed of the risks and of their rights.
The federal Privacy Act requires that a government institution inform any individual from whom the institution collects personal information about the individual of the purpose for which the information is being collected. The institution accomplishes this by including a Personal Information Collection Statement whenever Web pages provide an opportunity for site visitors to input personal information. The Personal Information Collection Statement must be prominently and immediately placed before each Web page (or series of Web pages that are part of the same application) or online form where personal information is entered and before each occurrence of a persistent cookie.
A Personal Information Collection Statement informs individuals that personal information is being collected about them, how the information will be used, whether provision of the information is mandatory or discretionary, how long the personal information will be kept, the Personal Information Bank number where the information will be kept and how they can obtain access to that information and how they can make requests for correction. Where applicable, the statement must also indicate if other methods are available for submitting personal information, such as by phone or in-person.
A sample Personal Information Collection Statement is provided in the CLF Toolbox.
13. Footer elements
The institution displays a footer as described in requirements 13.1 to 13.4 on every page except Welcome Pages and Server Message pages to signal to site visitors that they have reached the end of the Web page.
13.1 Colour strip
A strip of colour measuring 760 pixels wide by 15 pixels high must be the first element in the footer. The strip must be presented using a single colour in the Web-Smart colour palette and complements the design scheme of the institutional banner. Graphics must not be used in the strip.
13.2 Content date indicator
As Government of Canada sites are used to obtain valid, accurate and up-to-date information for personal and professional use, it is vitally important that the institution provide a clear date indicator for the resources placed on its Web sites. The institution must implement a content date indicator immediately below the colour strip in the footer, in the form "Date Modified: YYYY‑MM‑DD" to follow the ISO standard format for all-numeric date display that has been incorporated into the Federal Identity Program policy. "Date Modified" ("Date de modification" in French) is the most recent date on which the document was formally issued, substantially changed or reviewed.
The indicator must be aligned with the left margin of the page and must form part of the final line of content. The default font for the text is Verdana specified by a Cascading Style Sheet and the alternate font is sans serif. The text elements must be presented using a white (#FFFFFF) background colour and a foreground colour that achieves high contrast, when viewed by someone having colour deficits or when viewed on a black and white screen.
13.3 Top of page link
The institution must implement a link to the top of the page in the footer, consisting of a triangle graphic and the text "Top of Page" for English pages and "Haut de la page" for French pages. The link directs the site visitor to the top of the page immediately before the institutional signature.
The link is centered on the page and must form part of the final line of content. The default font for the text elements is Verdana specified by a Cascading Style Sheet and sans serif is the alternate font. These elements must be presented using a white (#FFFFFF) background colour and a foreground colour that achieves high contrast, when viewed by someone having colour deficits or when viewed on a black and white screen.
13.4 Important Notices link
The institution must implement a link to its Important Notices page in the footer, labelled "Important Notices" on English pages and "Avis importants" on French pages.
The link must be located in the lower right hand corner of the page aligned with the content currency indicator and forms part of the final line of content. The default font for the text is Verdana specified by a Cascading Style Sheet and sans serif is the alternate font. The text elements must be presented using a white (#FFFFFF) background colour and a foreground colour that achieves high contrast, when viewed by someone having colour deficits or when viewed on a black and white screen.
14. Important Notices page
To ensure that Canadians understand the rights, responsibilities and legal obligations of the information provider and the site visitor, the institution must implement an Important Notices page.
14.1 Government of Canada Privacy Notice
The Privacy Notice assures Web site visitors that information automatically acquired through a visit to any Government of Canada site will not be used other than for the express purposes of Web maintenance and security. One of the differences between electronic communications and paper-based communications is that it may not be obvious to the individuals involved whether or not personal information is being collected in the course of any specific interaction.
The Privacy Notice must provide enough detail to allow site visitors to understand what and how information will be collected and when as well as how it will be secured, and to make an informed decision concerning whether to remain at the site. For these reasons, the institution's Important Notices page must include a Privacy Notice that includes the elements set in requirements 14.1.1 to 14.1.11, even if no personal information is collected through the site.
- 14.1.1 Identification of the organization and how it can be contacted, including the name or position title of the person to contact with any Web site privacy concerns, usually the institution's Privacy Coordinator.
- 14.1.2 A clear description of any personal information that is collected automatically, a statement that such information is protected under the Privacy Act, the purpose for which it is collected, who will have access to it, how long it is kept, where it is kept and how individuals can access and correct their own personal information.
- 14.1.3 A statement explaining that should the site visitor choose to provide personal information through email or other means, such information is protected under the Privacy Act and will only be used for the specific purposes for which it has been provided, for example, to respond to a specific request, or where required by law, how long it is kept, where it is kept and how to obtain access and request corrections.
- 14.1.4 A statement that non-identifiable or statistical information may be collected for audit purposes, for use in maximizing effectiveness, or for another purpose specified here, if this is the case.
- 14.1.5 An explanation of any security use of information for purposes such as tracking suspected intrusions or the source of a computer virus, or controlling access to the system.
- 14.1.6 A statement concerning whether cookies, or any other data, are placed on the site visitor's machine, the type of cookies used (session or persistent), a definition of each type and how they are used.
- 14.1.7 A description of any privacy-enhancing technologies in use or available for use, such as the Public Key Infrastructure (PKI) or Secure Socket Layer (SSL).
- 14.1.8 A statement that individuals may contact the Office of the Privacy Commissioner if they are dissatisfied with the response they receive from the institution privacy contact on a privacy concern with the Web site.
- 14.1.9 Where applicable, a statement regarding any specific institutional policy on collecting information from children online.
- 14.1.10 A statement reminding site visitors that, unless specifically noted otherwise, neither electronic systems nor email are secure information transmission methods, and that it is not recommended that sensitive personal information be transmitted electronically.
- 14.1.11 In some circumstances, the institution may use an outside service provider as a Webmaster, and may provide a link for sending a message to the Webmaster. In such circumstances, the outside service provider must be under a contractual obligation to treat any personal information as though it were covered by the Privacy Act. In addition, the institution must make it clear to site visitors that they are sending information outside the institution.
Sample Government of Canada Privacy Notices are provided in the CLF Toolbox.
14.2 Official Languages Notice
The institution must provide an Official Languages Notice on its Important Notices page to inform Web site visitors of their right to receive information and to interact with the Government of Canada in the official language of their choice.
A sample Official Languages Notice is provided in the CLF Toolbox.
14.3 Hyperlinking Notice
The institution must provide a Hyperlinking Notice on its Important Notices page to inform site visitors of what expectations they should have about links to other Web sites, including accuracy, currency, and official languages.
When an institution establishes hyperlinks to non-Government of Canada sites to facilitate access to those sites for the public as a courtesy, the content of those sites does not need to be in both official languages or be fully accessible if they are not subject to federal legislation. The Hyperlinking Notice must state that there are no official languages obligations for non-Government of Canada sites. Where a non-Government of Canada site hosts information produced by or on behalf of an institution subject to the Official Languages Act, the hyperlink is not just "for courtesy only" and the institution has the obligation to ensure that its own information respects the requirement of the act. This does not mean that the rest of the non-Government of Canada site must be in both official languages.
A sample Hyperlinking Notice is provided in the CLF Toolbox.
14.4 Copyright / Permission to Reproduce Notice
The Internet provides a tremendous vehicle for distributing an enormous range of information to Canadians, when and where they need it. One of the Government of Canada's goals is to give Canadians information that is easily identified as having been created and / or distributed by the Government of Canada. Through the act of posting information on this medium, institutions are essentially indicating they want individuals to use, and to share, information found in this freely available format. For this reason, the institution must provide a Copyright / Permission to Reproduce Notice on its Important Notices page, to inform site visitors of content ownership and the conditions associated with reproduction of materials posted on Government of Canada Web sites.
A sample Copyright / Permission to Reproduce Notice is provided in the CLF Toolbox.
14.5 Reproduction of Government Symbols
The official symbols of the Government of Canada, including the 'Canada' wordmark, the Arms of Canada, and the flag symbol may not be reproduced, whether for commercial or non-commercial purposes, without written authorization. Request for authorization from the Treasury Board Secretariat may be addressed to the Federal Identity Program.
A sample Reproduction of Government Symbols Notice is provided in the CLF Toolbox.
15. Third-party information notice
When third-party information is hosted on the institutional Web site, a third-party information liability disclaimer must be directly attached to the externally sourced information and must describe the type of information to which the disclaimer applies.
A sample third-party information liability disclaimer is provided in the CLF Toolbox.
16. Crown copyright symbol
In exceptional circumstances in which the institution believes that application of the Crown copyright symbol is necessary to protect specific material on its Web sites, one of the following formats must be used:
-
© Government of Canada, date
or - © Applied title of Institution, date
17. Web analyzer tools
The institution ensures that important Web site statistics are gathered unobtrusively by using Web analyzer tools to collect site usage data. Counters must not be used to perform this function.
18. Server message pages
The institution must notify site visitors of problems on Web servers by implementing customized Server Message pages. Pages containing server messages must conform to the requirement regarding the language of the message prescribed by the Directive on the Use of Official Languages on Web Sites. The Federal Identity Program institutional signature must appear in the upper left corner and the "Canada" wordmark in the upper right corner on Server Message pages. The order of the official languages is dictated by the location of the office or facility providing the service through the site in question, that is, French on the left for an office or facility located in Quebec, and English on the left for an office or facility located elsewhere in Canada as set out in Appendix A of the Federal Identity Program Policy.
On bilingual Server Message pages, the text of the server message, including instructions, permissions, confirmations and errors must be presented in two columns. The first column must be left aligned under the institution's applied title. The footer must consist of a colour strip as specified in requirement 13.1, a content date indicator in the form of "Date Modified: YYYY‑MM‑DD" and "Date de modification : AAAA‑MM‑JJ" and corresponding links to "Important Notices" and "Avis importants" aligned below each content date indicator. The order of the official languages is dictated by the location of the office providing the service through the site in question, that is, French on the left for an office or facility located in Quebec, and English on the left for an office or facility located elsewhere in Canada as set out in Appendix A of the Federal Identity Program Policy.
On unilingual Server Message pages, the text of the server message, including instructions, permissions, confirmations and errors must be left aligned under the institution's applied title. The footer must consist of a colour strip as specified in requirement 13.1, a content date indicator in the language of the page in the form of "Date Modified: YYYY‑MM‑DD" or "Date de modification : AAAA‑MM‑JJ" aligned with the left margin of the page and a link to "Important Notices" or "Avis importants" in the bottom right corner and aligned with the content date indicator.
Monitoring and reporting
Consistent with the requirements above, deputy heads will monitor adherence to this standard within their institutions, taking direction from Treasury Board's Active Monitoring Policy, Evaluation Policy and Policy on Internal Audit.
At a minimum, the institution assesses the following:
- presence of each mandatory element;
- absence of an institutional menu bar;
- a privacy notice statement precedes the collection of any personal information; and
- absence of Web counters.
The Treasury Board Secretariat will monitor compliance with all aspects of this standard in a variety of ways, including but not limited to assessments under the Management Accountability Framework, examinations of Treasury Board Submissions, Departmental Performance Reports and results of audits, evaluations and studies.
With respect to the Office of the Auditor General, the Office of the Privacy Commissioner, the Office of the Information Commissioner, the Office of the Chief Electoral Officer, the Office of the Commissioner of Lobbying, the Office of the Commissioner of Official Languages and the Office of the Public Sector Integrity Commissioner, the deputy head of the institution is solely responsible for monitoring and ensuring compliance with these standards within their organizations, as well as for responding to cases of non-compliance in accordance with any Treasury Board instruments that address the management of compliance.
Consequences
Deputy Heads are responsible for addressing significant issues that arise regarding compliance and ensure appropriate remedial actions are taken to address these issues commensurate with the specific nature of the failure.
Consequences of non-compliance can include informal follow-ups and requests from the Treasury Board Secretariat, external audits and formal direction on corrective measures.
Authority to amend
The Treasury Board of Canada delegates to the President of the Treasury Board the power to amend, revoke or add to the approved Common Look and Feel Standards for the Internet. Treasury Board is to be kept informed of updates and amendments.
Requests for exemption
The Treasury Board of Canada delegates to the President of the Treasury Board the power to grant exemptions from the Common Look and Feel Standards for the Internet. The minister presiding over the institution may apply in writing to the President of the Treasury Board for an exemption from one or more requirements of this standard. The application must consist of a detailed rationale and risk analysis for exemption from each requirement.
Enquiries
Address:
Common Look and Feel Office
Information Technology Division
Chief Information Officer Branch
Treasury Board of Canada Secretariat
2745 Iris Street
Ottawa, Ontario
K1A 0R5
Email:clf-nsi@tbs-sct.gc.ca
Telephone: 613-952-6987
Toll free: 877-636-0656
Facsimile: 613-960-0050
Teletypewriter: 613-957-9090 (TBS)
Glossary
- Applied title (titre d'usage)
- An institution's official title registered under the Federal Identity Program and required for use in all public communications and visual identity applications. A complete listing of applied titles and their abbreviations in both official languages is available at: http://www.tbs-sct.gc.ca/pubs_pol/sipubs/TB_FIP/titlesoffedorg1-eng.asp
- Breadcrumb trail (fil d'Ariane)
- A navigation tool that allows a user to see where the current page is in relation to the Web site's organizational structure and offer shortcut links for users to navigate to higher level categories.
- Cookie (témoin)
- A data file sent by a Web server to the web browser on a client's computer that the Web server uses to track visitors and remember information about them. Typically, a cookie will only remember information that a client provides. The data stored within a cookie can only be read by the Web server that originally sent it.
- Deputy head (administrateur général)
- This term is equivalent to "deputy minister", "chief executive officer" or some other title denoting this level of responsibility.
- Federal Identity Program (Programme de coordination de l'image de marque)
- The Government of Canada's corporate identity program, which helps project the government as a coherent, unified administration and enables Canadians and international guests to recognize at a glance the government at work. The Federal Identity Program facilitates access to government programs and services through clear and consistent identification.
- Institution
- For the purposes of CLF, an institution is any organizational entity listed under a unique title in Schedules I, I.1 and II of the Financial Administration Act.
- Public Key Infrastructure (Infrastructure à clé publique)
- A system of digital certificates, certificate authorities, and other registration authorities that verify and authenticate the validity of each party involved in an Internet transaction.
- Secure Sockets Layer (Protocole SSL)
- A protocol that transmits communications securely over the Internet through encryption and the use of security certificates. Security certificates contain information about who the communication belongs to, who it was issued by, a unique serial number or other unique identification, valid dates, and an encrypted "fingerprint" that can be used to verify the contents of the certificate. Online shopping and bank Web sites frequently use SSL technology to safeguard credit card information.
- Sub site (sous-site)
- For the purposes of Common Look and Feel, a sub site is a collection of Web pages with a more local structure or distinct information space within a larger and more general site, intended for a particular audience and whose specific purpose is to feature a prominent program or service.
- Titles of federal institutions
- (see applied title)
- World Wide Web Consortium
- http://www.w3.org
Appendix A
- Bilingual Welcome Page - Office or facility located in Quebec
- Bilingual Welcome Page - Office or facility located in Quebec - 3 line FIP Signature
- Bilingual Welcome Page - Office or facility located elsewhere in Canada
- Bilingual Welcome Page - Office or facility located elsewhere in Canada - 3 line FIP Signature
Appendix B
Appendix C
Appendix D
Appendix E
Appendix F
- Multilingual Content Page - Office or facility located in Quebec - 3 Column
- Multilingual Content Page - Office or facility located in Quebec - 2 Column
- Multilingual Content Page - Office or facility located in Quebec - 1 Column
- Multilingual Content Page - Office or facility located elsewhere in Canada - 3 Column
- Multilingual Content Page - Office or facility located elsewhere in Canada - 2 Column
- Multilingual Content Page - Office or facility located elsewhere in Canada - 1 Column