Skip to content

Layout and Design Checking

irwink edited this page Jun 16, 2015 · 1 revision

Layout and Design Checking

The Layout and Design checking module of the WPSS Validation Tool performs a number of checks on the structure, layout and design of Web pages. The Validation Tool use a profile of test cases to determine which checks to perform and report on.

Layout and Design Checking Profiles

The WPSS Validation Tool uses a profile to specify the list of test cases to check and report on. The profiles are:

  • Internet PWGSC Web Usability – PWGSC Internet Standard on Web Usability layout and design test cases.
  • GC Intranet PWGSC Web Usability – PWGSC GC Intranet layout and design test cases.
  • Intranet PWGSC Web Usability – PWGSC Intranet layout and design test cases.
  • Internet TBS Web Usability - Internet Standard on Web Usability layout and design test cases.
  • TBS SWU Intranet - GC Intranet layout and design test cases.
  • CLF 2.0 – CLF 2.0 layout and design test cases.
  • Canada.ca – Canada.ca layout and design test cases.
  • None – No layout and design checking.

The list of test cases in each profile is outlined in the following pages. Internet PWGSC Web Usability – PWGSC Internet Standard on Web Usability Layout and Design test cases This profile contains test cases for the Standard on Web Usability.

SWU_TEMPLATE

Description Template markers
Checks for All of the required page sections and subsections are found in web pages. The checks are done by looking for id, CSS class or role values on HTML tags. It also checks for required skip links (skip to content) in the page header. Web pages are expected to be implemented using the GC Web Usability theme of the Web Experience Toolkit (WET) templates. Content Pages; Checks for GC navigation bar, Site banner, Content area, Date modified Site footer and Government of Canada footer. Splash Pages; Checks for Header (Federal Identity Program image), Site titles (left and right), Language links and Terms and conditions footer. Server Message Pages; Checks for Header (Federal Identity Program image), Site titles (left and right), Language links, Decoration bar (bar above Terms and conditions) and Terms and conditions footer.

SWU_6.1.5

Description Archived Web page notice.
Checks for All required archive markers on archived pages. A page is deemed archived if it has half of the markers; Page <title> begins with the word “ARCHIVED” or “ARCHIVÉ”. The description metadata item begins with the word “ARCHIVED” or “ARCHIVÉ”. A content area <h1> heading begins with the word “ARCHIVED” or “ARCHIVÉ”. A content area <h2> heading begins with the words “Archived Content” or “Information archivée dans le Web”.

SWU_E2.1

Description Displays the favicon prescribed by the Federal Identity Program.
Checks for That Web pages specify a favicon using a link tag in the page <head> section <link rel=”shortcut icon” href=”fip-pcim/images/favicon.ico” /> There is at most one favicon specified. The href is not a broken link and references an image file.
Does Not Checks That the favicon image is one prescribed by the Federal Identity Program.

SWU_E2.2.2

Description Content pages, Federal Identity Program signature.
Checks for An image is present in the GC Navigation bar section. The image alt text is “Government of Canada” on English pages and “Gouvernement du Canada” on French pages.
Does Not Checks The location or size of the image. That the image is one prescribed by the Federal Identity Program.

SWU_E2.2.3

Description Canada Wordmark.
Checks for An image is present in the Site banner bar section. That the image alt text is “Symbol of the Government of Canada” on English pages and “Symbole du gouvernement du Canada” on French pages.
Does Not Checks The location or size of the image. That the image is one prescribed by the Federal Identity Program.

SWU_E2.2.4

Description Content pages, Official language selection link.
Checks for An optional language link in Government of Canada Navigation bar section. If there are more than the mandatory links, the first link after the mandatory links is expected to be the language link. The link text is “Français” on English pages and “English” on French pages.
Does Not Checks That the link is to the alternate language version of the document.

SWU_E2.2.5

Description Content pages, Header.
Checks for The required Government of Canada Navigation bar links exist with the correct anchor text and href values. There are no more links in the Government of Canada Navigation bar than the required links plus the language link. There is only one input field for the Search form. The search text input field has a default. The search text input field default size is 27 characters. There is only one button in the Search form. The label on the Search form button is “Search” on English pages and “Recherche” on French pages. A single link in the Site Banner, the site title link. If there are Breadcrumb links, the anchor text of the first link is “Home” on English pages and “Accueil” on French pages. If there is a Home Breadcrumb link, the href value matches the href value of the site title link. Links in the breadcrumb section appear in <li> tags. All links in the site navigation section are text only links (no image links). The site navigation links are the same (anchor text and href) on all pages.
Does Not Checks That the link in the site banner links to the home page. The location or size of the header elements.

SWU_E2.2.6

Description Content pages, Body.
Checks for A definition list (dl) exists for the date modified subsection. The date modified label appears in a dt tag with one of the following values: Date modified:(on English pages) Version:(on English pages) Date de modification : (on French pages) Version : (on French pages) There is only one date modified label. The date modified value appears in add tag and that it is not an empty string. If the date modified value is a date item (label is “Date modified:” or “Date de modification :”), is it a well formed date (YYYY-MM-DD). There is only one date modified value. If the date modified value is a date item (label is “Date modified:” or “Date de modification :”), see if the value matches the dcterms.modified metadata item.
Does Not Checks The location or size of the body elements.

SWU_E2.2.7

Description Content pages, Footer.
Checks for “Terms and Conditions” (“Avis”) and “Transparency” (“Transparence”) links. Required site footer links, for example, “About us”, “À propos de nous”. Required site footer link “Contact us”, “Contactez-nous” somewhere in the site footer links area. All links in the site footer section are text only links (no image links). The site footer links are the same (anchor text and href) on all pages. The required GC Footer links exist with the correct anchor text and href values. There are no more links in the GC footer than the required links.
Does Not Checks The location or size of the footer elements. For optional site footer links. The presentation aspects of links, for example, bold. href values of site footer links.

SWU_E2.4

Description Splash pages
Checks for A Federal Identity Program image is present in the header section. The image alt text is “Government of Canada / Gouvernement du Canada” on splash pages with the “English” language button to the left “Gouvernement du Canada / Government of Canada” on splash pages with the “Français” language button to the left. A left and right site title. The site titles are not empty strings. There are “English” and “Français” language links. An image (wordmark) is present in the language selection section. The image alt text is “Symbol of the Government of Canada / Symbole du gouvernement du Canada” on splash pages with the English language button to the left “Symbole du gouvernement du Canada / Symbol of the Government of Canada” on splash pages with the Français language button to the left. There are “Terms and Conditions” and “Avis” links. The order of the links matches the order of the language links.
Does Not Checks The location or size of the splash page elements. That the language links reference the home pages.

SWU_E2.5

Description Server message pages.
Checks for A Federal Identity Program image is present in the header section. Checks that the image alt text is “Government of Canada / Gouvernement du Canada” on bilingual server pages with the English site title to the left “Gouvernement du Canada / Government of Canada” on bilingual server pages with the French site title to the left. “Government of Canada” on English server pages. “Gouvernement du Canada” on French server pages. An image (wordmark) is present in the header section. Checks that the image alt text is “Symbol of the Government of Canada / Symbole du gouvernement du Canada” on bilingual server pages with the English site title to the left “Symbole du gouvernement du Canada / Symbol of the Government of Canada” on bilingual server pages with the French site title to the left. “Symbol of the Government of Canada” on English server pages. “Symbole du gouvernement du Canada” on French server pages. A left and optional right site title. The site titles are not empty strings. The site titles are links.
Does Not Checks The location or size of the server message page elements. That the site title links reference the home pages. The href values of links.

GC Intranet PWGSC Web Usability – PWGSC GC Intranet Layout and Design test cases This profile contains the following test cases.

  • SWU_6.1.5
  • SWU_E2.1
  • SWU_E2.2.2
  • SWU_E2.2.3
  • SWU_E2.2.6
  • SWU_E2.2.7
  • SWU_E2.4
  • SWU_E2.5
  • SWU_TEMPLATE

Intranet PWGSC Web Usability – PWGSC Intranet Layout and Design test cases

This profile contains the following test cases.

  • SWU_6.1.5
  • SWU_E2.1
  • SWU_E2.2.2
  • SWU_E2.2.3
  • SWU_E2.2.4
  • SWU_E2.2.5
  • SWU_E2.2.6
  • SWU_E2.2.7
  • SWU_E2.4
  • SWU_E2.5
  • SWU_TEMPLATE

Internet TBS Web Usability – Internet Standard on Web Usability layout and design test cases

This profile contains the following test cases.

  • SWU_6.1.5
  • SWU_E2.1
  • SWU_E2.2.2
  • SWU_E2.2.3
  • SWU_E2.2.4
  • SWU_E2.2.5
  • SWU_E2.2.6
  • SWU_E2.2.7
  • SWU_E2.4
  • SWU_E2.5
  • SWU_TEMPLATE

TBS SWU Intranet – GC Intranet layout and design test cases

This profile contains the following test cases.

  • SWU_6.1.5
  • SWU_E2.1
  • SWU_E2.2.2
  • SWU_E2.2.3
  • SWU_E2.2.4
  • SWU_E2.2.5
  • SWU_E2.2.6
  • SWU_E2.2.7
  • SWU_E2.4
  • SWU_E2.5
  • SWU_TEMPLATE

Canada.ca – Canada.ca layout and design test cases

This profile contains the following test cases.

  • SWU_6.1.5
  • SWU_E2.1
  • SWU_TEMPLATE