Web Experience Toolkit (WET)
Web Experience Toolkit (WET) v2.3 release notes¶
Table of Contents¶
Overview¶
Web Experience Toolkit (WET) includes ready-made tools and solutions for building and maintaining innovative Web sites that are accessible, usable, and interoperable. These tools and solutions are open source software and free for use by departments and external Web communities.
The toolkit complies with the new Standard on Web Accessibility and the new Standard on Web Usability; the toolkit will also ease compliance with other new Web Standards, including Web Interoperability. WET is highly recommended for use on Government of Canada websites.
Benefits¶
- Provides ready-made Web tools and solutions for building and maintaining innovative Web sites.
- Respects accessibility (WCAG 2.0 AA and WAI-ARIA), usability, and interoperability.
- Reduces costs by consolidating Web tools and solutions.
- Open source software that is free to use by departments and external Web communities.
- Uses advanced technologies to push the envelope for Web site functionality:
- Supports a wide range of layouts and designs for internal and external Web sites (including applications).
Features¶
There are 61 features included in WET v2.3 (9 new and 37 updated). The following benefits apply to each of these features:- Conforms to WCAG 2.0 AA
- Progressive enhancement approach
- Supports Firefox, Opera, Safari, Chrome, and IE 7+
To report a defect or to suggest an improvement for any of these features, please register for an IRCan account and follow the instructions in the Reviewer's Guide.
Core framework¶
HTML5 core markup structure - Version 1.3 (Updated)¶
Overview: This feature combines HTML5 semantic markup, XML conformance, WAI-ARIA, and accessible coding to create the structural layer of the WET core framework.
Benefits:- Can be applied to Web sites, Web applications, and other Web-based tools
- Allows a wide range of layouts and designs
- Uses HTML5 semantic elements and WAI-ARIA to enhance accessibility
- Groups most of the navigation after the content area
- Validates to HTML5 and is XML conformant
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.3 | 2012-02-06 | Changed "Primary navigation" to "Side navigation" and "Navigation principale" to "Navigation latérale" |
| Added themes for fixed width (base-fixed), fixed width + grids (base-fixed-grids) and fluid (base-fluid) | ||
| Removed printer-friendly CSS section | ||
| Removed reference to util.css | ||
| Added "cn-col-inner" div to increase design flexibility | ||
| Removed type="text/css" from stylesheet links | ||
| Optimized the source code comments and the use of spacing to significantly reduce the HTML file sizes | ||
| Deleted the include files since they were out of date and no longer relevant | ||
| 1.2 | 2011-08-08 | Added a bilingual one-column template (English/French and French/English) |
| Improved the HTML5 outline by optimizing the use of section, header, and nav elements | ||
| Removed link element with rel="schema.dcterms" (no longer validates) | ||
| Removed type="text/javascript" from script elements load JavaScript (redundant) | ||
| Corrected minor errors in the XML files of the includes directory | ||
| 1.1 | 2011-02-07 | Moved CLF 2.0 and General themes to separate WET projects |
| Created include file versions of the core markup structure | ||
| Removed meta http-equiv, xml:lang, and xmlns from markup | ||
| Changed metadata namespace from "dc" to "dcterms" | ||
| Specified metadata scheme with title attribute | ||
| Moved role="navigation" to nav element to avoid landmark duplication | ||
| Moved id="cn-nav" from a to h2 in 1col-theme-base-eng.html | ||
| Corrected a few source code comments | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: HTML5 core markup structure
XHTML 1.0 Strict core markup structure - Version 1.3 (Updated)¶
Overview: This feature combines XHTML 1.0 Strict and accessible coding to create the structural layer of the WET core framework.
Benefits:- Can be applied to Web sites, Web applications, and other Web-based tools
- Allows a wide range of layouts and designs
- Groups most of the navigation after the content area
- Validates to XHTML 1.0 Strict
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.3 | 2012-02-06 | Changed "Primary navigation" to "Side navigation" and "Navigation principale" to "Navigation latérale" |
| Added themes for fixed width (base-fixed), fixed width + grids (base-fixed-grids) and fluid (base-fluid) | ||
| Removed printer-friendly CSS section | ||
| Removed reference to util.css | ||
| Added "cn-col-inner" div to increase design flexibility | ||
| Optimized the source code comments and the use of spacing to significantly reduce the HTML file sizes | ||
| Deleted the include files since they were out of date and no longer relevant | ||
| 1.2 | 2011-08-08 | Added a bilingual one-column template (English/French and French/English) |
| Corrected minor errors in the XML files of the includes directory | ||
| 1.1 | 2011-02-07 | Moved CLF 2.0 and General themes to separate WET projects |
| Created include file versions of the core markup structure | ||
| Changed metadata namespace from "dc" to "dcterms" | ||
| Specified metadata scheme with scheme attribute | ||
| Corrected a few source code comments | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: XHTML 1.0 Strict core markup structure
CSS presentation layer - Version 1.3 (Updated)¶
Overview: This feature provides the CSS-based presentation layer of the WET core framework.
Benefits:- Can be applied to Web sites, Web applications, and other Web-based tools
- Allows a wide range of layouts and designs
- Implements a theme-based approach to make it easy to configure the layout and design
- Skip navigation links become visible with mouse hover or keyboard focus
- Integrated printer-friendly functionality
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.3 | 2012-02-06 | Corrected textarea font issue in Firefox |
| Corrected IE7 issue where activating same page links targeting a hidden heading did not cause the page to scroll down | ||
| Removed dotted underline from abbr and acronym because it was discouraging the use of the abbr and acronym elements | ||
| Added themes for fixed width (base-fixed), fixed width + grids (base-fixed-grids) and fluid (base-fluid) | ||
| Removed the top border from print CSS | ||
| Removed the default style from address elements | ||
| Made the positioning of the skip header links more consistent across the various themes | ||
| Removed support for the "invisible" class since "cn-invisble" should be used instead | ||
| 1.2 | 2011-08-08 | Corrected a text size issue with form fields in non-IE browsers |
| Skip header links are now only visible on keyboard focus | ||
| Corrected positioning of invisible link targets | ||
| Corrected skip header link spacing issues in IE6 | ||
| 1.1 | 2011-02-07 | Moved CLF 2.0 and General themes to separate WET projects |
| Added support for a 2-column layout with a right column for navigation | ||
| Corrected right-to-left and bi-directional support for hidden content | ||
| Deprecated .navaid and added .cn-invisible, .cn-show-onfocus, and .cn-show-onhover CSS classes for hiding content | ||
| Corrected IE6, IE7, and Chrome display issues | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: CSS presentation layer
jQuery integration - Version 1.3 (Updated)¶
Overview: This feature uses the jQuery JavaScript framework to create a plugin-based approach for enhancing the WET core framework.
Benefits:- Includes the jQuery JavaScript Library which "simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development" (Source: http://jquery.com)
- Provides a plugin-style architecture that can load scripts and CSS files without the use of link and script elements
- Allows jQuery plugins and other JavaScript files to be added to the WET framework by wrapping them in a WET plugin
- Simplifies plugin development by providing utility functions for loading parameters from a script id and dynamically loading JavaScript library files and CSS files
- Requires only one line of code in a Web page to enable and configure WET plugins
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.3 | 2012-02-06 | Added jQuery UI 1.8.16 |
| Updated jQuery to 1.7.1 | ||
| Updated the default jQuery UI theme to fix contrast issues and remove font styles | ||
| Added the jQuery Metadata plugin to support the new parameterless approach | ||
| Added jQuery HashChange to the core | ||
| Added CSS3 PIE to the core to enable CSS3 features in IE6 - IE8 | ||
| Added detection for changes in text size, zoom, and browser window size | ||
| Added the url function/object to the PE object and added pathTokenized and queryTokenized to it for easier manipulation of path and querystrings | ||
| Fixed loading issues with Equal heights | ||
| Equal heights feature now recalculates for every change in text size, zoom, and browser window size | ||
| Added code to fix focus problem related to anchors with some browsers | ||
| Added ie6Reflow for better ie6 image scaling in a responsive design system | ||
| Added HTML lang capability for language detection | ||
| 1.2 | 2011-08-08 | Added method for testing if CSS is supported/enabled |
| Modified the plugin module to allow for better scalability of features. | ||
| Fixed plugin detection issue in Firefox Ubuntu where the version could not be detected properly. | ||
| Fixed IE6 issue with keyboard focus tooltips | ||
| Fixed IE6 issue with cn-linkdesc content being clipped when extending beyond the right boundary of the content area | ||
| Fixed IE6 issue with the calculation of the size of the right border | ||
| Fixed IE6 scripting error with footer height adjustment of CLF 2.0 Welcome page | ||
| 1.1 | 2011-02-07 | Added Silverlight support |
| Better support for cookies with a new $.Storage function | ||
| Removed transparent background in Flash | ||
| Added caption support for Flash and Silverlight | ||
| Added the jQuery cookie plugin | ||
| Improved the version detection of plugins | ||
| Corrected overflow handling | ||
| Fixed layout issues with IE6 | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: jQuery integration
Framework variants¶
.NET variant - Version 1.0¶
Overview: This feature adapts the XML/XSLT Abstraction feature for use with .NET.
Benefits:- Makes it quicker and easier to update the core markup structure across a site
- Reduces maintenance and migration costs
- Reduces network usage
- Makes it easier to create and maintain Web pages
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.0 | 2011-08-08 | Initial release |
Project page: .NET variant
ASP variant - Version 1.1¶
Overview: This feature adapts the HTML5 and XHTML 1.0 Strict core markup structures for use with ASP.
Benefits:- Helps to minimize the duplication of content and code (such as titles and dates)
- Provides central control of the left and right columns
- Improves consistency by separating content from the template code
- Automates the breadcrumb trail
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.1 | 2011-08-08 | Updated to the latest version of the core markup and the CLF 2.0 theme |
| Fixed validation and spelling errors | ||
| Added Proactive Disclosure link to the 3 column template of the CLF 2.0 theme | ||
| 1.0 | 2011-02-07 | Initial release |
Project page: ASP variant
CodeIgniter variant - Version 1.0¶
Overview: This feature adapts the XML/XSLT Abstraction feature for use with CodeIgniter.
Benefits:- Makes it quicker and easier to update the core markup structure across a site
- Reduces maintenance and migration costs
- Reduces network usage
- Makes it easier to create and maintain Web pages
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.0 | 2011-08-08 | Initial release |
Project page: CodeIgniter variant
Drupal variant - Version 1.0 (New)¶
Overview: This is a Drupal 7 Distribution using the WET library + themes that allows for users to start using Drupal an Enterprise Web Content Management System with a pre-configured and often best practice implementation for government. This Distribution comes with a variety of features and is constantly being improved to meet both government requirements and other industries.
Benefits:
The Distribution has a lot of features that were implemented in the 1.0 release. These features either came through a variety of top notch Drupal modules or through custom modules that were added to ingrate more government aligned functionality. A list of the custom modules are provided in the appendix.
- Custom Installation Profile (webexp): This installation profile installs the baseline suite of modules needed to properly use the distribution and its related features.
- Improved CLF Theme Integration in Drupal: A lot of work has gone into integrating the new GCWU theme and the related WET library.
- Complex Access Control + Workflow: The Workbench + Rules module help to built a great detail driven workflow.
- Pre-Configured Roles + Users + Permissions: A baseline set of defaults permissions come with the Distribution and once the settings have been both updated and tailored to the organization they can be exported and become the default install.
- Multilingualism: A great deal of work was done on ensuring the Distribution is fully functionally with both the English and Frech languages. Custom translations were made for most custom work and a great deal was done to ease the creation of multilingual content.
For a more up to date and comprehensive feature guide and knowledge base please go to: https://wetkit.atlassian.net/wiki/display/WETKIT/Home
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.0 | 2012-02-06 | Initial release |
Project page: Drupal variant project
Java variant - Version 1.0¶
Overview: This feature adapts the XML/XSLT Abstraction feature for use with Java.
Benefits:- Makes it quicker and easier to update the core markup structure across a site
- Reduces maintenance and migration costs
- Reduces network usage
- Makes it easier to create and maintain Web pages
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.0 | 2011-08-08 | Initial release |
Project page: Java variant
Mobile device variant - Version 1.01¶
Overview: This feature optimizes the core framework for mobile devices.
Benefits:- Expands the content area to the full width of the screen
- Displays the left and/or right columns below the content area
- Skip header links are visible by default
- Does not remove any information
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.01 | 2011-08-08 | Updated to latest versions of the HTML5 core markup structure, the CLF 2.0 theme, and the base theme |
| 1.0 | 2011-02-07 | Initial release |
Project page: Mobile device variant
PHP variant - Version 1.3 (Updated)¶
Overview: This feature adapts the HTML5 core markup structure for use with PHP.
Benefits:- Helps to minimize the duplication of content and code (such as titles and dates)
- Provides central control of the left and right columns
- Improves consistency by separating content from the template code
- Automates the breadcrumb trail
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.3 | 2012-02-06 | Added support for the GC Web Usability theme |
| Updated to the latest version of the CLF 2.0, General and base themes | ||
| Add nojquery option for disabling jQuery framework | ||
| 1.2 | 2011-08-08 | Updated to the latest version of the core markup and the CLF 2.0 theme |
| Fixed validation and spelling errors | ||
| Corrected English/Français URLs and title values on Welcome pages | ||
| 1.1 | 2011-02-07 | Updated to the latest version of the core markup |
| Minor reorganization and optimisation of files | ||
| Fixed pg_html5 implementation | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: PHP variant
Ruby on Rails variant - Version 1.0¶
Overview: This feature adapts the HTML5 core markup structure for use with Ruby on Rails. The code is currently packaged as a fully operational stock Rails web application.
There are plans to eventually extract the WET core framework into a separate gem or engine that can be dropped into existing Rails apps.
- Allows web developers to use Ruby on Rails for rapid Web application development
- Helps to minimize the duplication of content and code
- Out-of-the-box bilingual support
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.0 | 2011-08-08 | Initial release |
Project page: Ruby on Rails variant
SSI variant - Version 1.3 (Updated)¶
Overview: This feature adapts the HTML5 core markup structure for use with Server side includes (SSI).
Benefits:- Helps to minimize the duplication of content and code (such as titles and dates)
- Provides central control of the left and right columns
- Improves consistency by separating content from the template code
- Automates the breadcrumb trail
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.3 | 2012-02-06 | Added support for the GC Web Usability theme |
| Updated to the latest version of the CLF 2.0, General and base themes | ||
| Added nojquery option for disabling jQuery framework | ||
| 1.2 | 2011-08-08 | Updated to the latest version of the core markup and the CLF 2.0 theme |
| Fixed validation and spelling errors | ||
| 1.1 | 2011-02-07 | Updated to the latest version of the core markup |
| Minor reorganization and optimisation of files | ||
| Fixed pg_html5 implementation | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: SSI variant
TYPO3 variant - Version 1.0¶
Overview: This feature adapts the HTML5 core markup structure for use with TYPO3.
Benefits:- Helps to minimize the duplication of content and code (such as titles and dates)
- Provides central control of the left and right columns
- Improves consistency by separating content from the template code
- Automates the breadcrumb trail
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.0 | 2011-08-08 | Initial release |
Project page: TYPO3 variant
WordPress variant - Version 1.1 (Updated)¶
Overview: This feature adapts the WET core framework and the CLF 2.0 theme for use as a WordPress theme.
Benefits:- Easy to install like any other WordPress theme
- Supports English and French in a single WordPress instance
- CLF 2.0 compliant
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.1 | 2011-08-08 | Updated to the latest versions of the HTML5 core markup and the CLF 2.0 theme |
| Corrected parsing error in index.php | ||
| Optimized HTML5 outline in sidebar.php | ||
| Removed unnecessary files | ||
| Corrected the heading structure | ||
| Corrected use of tables for admin page | ||
| Removed extra search field in search results to prevent conflicting ids and redundancy. | ||
| 1.0 | 2011-02-07 | Initial release |
Project page: WordPress variant
XML/XSLT Abstraction - Version 1.2¶
Overview: This feature uses XML and XSLT to completely separate the core markup structure from content.
Benefits:- Makes it quicker and easier to migrate content into a Content Management System
- Makes it quicker and easier to update the core markup structure across a site
- Reduces of maintenance and migration costs
- Reduces network usage
- Makes it easier to create and maintain Web pages
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.2 | 2011-08-08 | Updated to the latest versions of the HTML5 core markup and the CLF 2.0 theme |
| 1.1 | 2011-02-07 | Updated to the latest version of the core markup |
| 1.0 | 2010-08-09 | Initial release |
Project page: XML/XSLT Abstraction
WET themes¶
Accessibil-IT theme - Version 1.2 (Updated)¶
Overview: This feature provides an Accessibil-IT theme for the WET core framework.
Benefits:- Uses HTML5 semantic elements and WAI-ARIA to enhance accessibility
- Groups most of the navigation after the content area
- Validates to HTML5
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.2 | 2012-02-06 | Enabled responsive layout |
| Improved compatibility with responsive layout | ||
| Optimized the source code comments and the use of spacing to significantly reduce the HTML file sizes | ||
| Migrated to the WET v2.3 framework and features | ||
| Now uses the WET CSS Grid System | ||
| Replaced coin slider with the WET Tabbed interface | ||
| Replaced contact form validation with the WET Form validation | ||
| Corrected logo display issue in IE6 | ||
| 1.1 | 2011-08-08 | Updated to the latest version of the HTML5 core markup |
| Corrected heading structure | ||
| 1.0 | 2011-02-07 | Initial release |
Project page: Accessibil-IT theme
CLF 2.0 theme - Version 1.3 (Updated)¶
Overview: This feature provides a CLF 2.0 theme for the WET core framework.
Benefits:- Conforms to CLF 2.0
- Uses HTML5 semantic elements and WAI-ARIA to enhance accessibility (HTML5 Web pages only)
- Groups most of the navigation after the content area
- Validates to HTML5 and is XML conformant (HTML5 Web pages only)
- Validates to XHTML 1.0 Strict and is XML conformant (XHTML 1.0 Strict Web pages only)
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.3 | 2012-02-06 | Added "Transparency" heading and "Completed Access to Information Requests" link above the "Proactive Disclosure" link in the left column of the 3-column layout (same for French). |
| Changed "Breadcrumb" to "Breadcrumb trail" | ||
| Disabled skip header links in both the splash pages and the server message pages | ||
| Improved the appearance of the favicon | ||
| Floated #cn-msg-space to improve Welcome page compatibility with larger text sizes | ||
| Removed the gap elements since JS is now used to equalize column heights | ||
| Integrated print CSS into main CSS files (eliminates the need for a separate print CSS file) | ||
| Added breadcrumb to print version of content pages | ||
| Improved print support for Welcome pages and server message pages | ||
| Fixed display and printing issues with Date Modified | ||
| Updated to latest version of the WET core framework | ||
| Optimized the source code comments and the use of spacing to significantly reduce the HTML file sizes | ||
| Deleted the include files since they were out of date and no longer relevant | ||
| Deleted the printer-friendly CSS since no longer needed | ||
| 1.2 | 2011-08-08 | Added multilingual working examples |
| Updated to the latest version of the core markup | ||
| Removed rel="up up up", rel="up up" and rel="up" ("up" removed from HTML5) | ||
| Corrected printing issues in Firefox, Safari, and Internet Explorer | ||
| Corrected spacing issues affecting most browsers | ||
| Corrected IE6 display issues | ||
| Removed the title/scheme attribute from the dcterms.creator metadata field (to align with IM guidance) | ||
| Added content date indicators to the server message pages | ||
| Corrected the Welcome page and server message page heading structures | ||
| 1.1 | 2011-02-07 | Separated the CLF 2.0 theme from the WET core framework |
| Created include file versions of the CLF 2.0 theme | ||
| Updated HTML files to v1.1 of the HTML5 and XHTML 1.0 Strict core markup structures | ||
| Corrected right-to-left and bi-directional support for hidden content | ||
| Corrected IE6 and IE7 display issues | ||
| Corrected Welcome page margins | ||
| Corrected server message page width | ||
| Increased linked area, corrected appearance, and changed hover effect for h3 links in the left and right columns | ||
| Increased linked area of "Top of Page" links to include the arrow | ||
| 1.0 | 2010-08-09 | Initial release included in the WET core framework |
Project page: CLF 2.0 theme
GC intranet theme - Version 1.0 (New)¶
Overview: This feature provides an optional theme for GC intranets that is based off of the GC Web Usability theme.
Benefits:
- Conforms to the Standard on Web Accessibility and Standard on Web Usability
- Conforms to WCAG 2.0 AA
- Uses HTML5 semantic elements and WAI-ARIA to enhance accessibility (HTML5 Web pages only)
- Groups most of the navigation after the content area
- Validates to HTML5 and is XML conformant (HTML5 Web pages only)
- Validates to XHTML 1.0 Strict and is XML conformant (XHTML 1.0 Strict Web pages only)
- Supports Firefox, Opera, Safari, Chrome, and IE 6+
Version history:GC intranet theme
| Version | Date released | Highlights |
|---|---|---|
| 1.0 | 2012-02-06 | Initial release |
Project page: GC intranet theme
GC Web Usability theme - Version 1.0 (New)¶
Overview: This theme was developed to help Government of Canada websites comply with the Standard on Web Usability.
Benefits:
- Conforms to the Standard on Web Accessibility and Standard on Web Usability
- Conforms to WCAG 2.0 AA
- Uses HTML5 semantic elements and WAI-ARIA to enhance accessibility (HTML5 Web pages only)
- Groups most of the navigation after the content area
- Validates to HTML5 and is XML conformant (HTML5 Web pages only)
- Validates to XHTML 1.0 Strict and is XML conformant (XHTML 1.0 Strict Web pages only)
- Supports Firefox, Opera, Safari, Chrome, and IE 6+
Version history:GC Web Usability theme
| Version | Date released | Highlights |
|---|---|---|
| 1.0 | 2012-02-06 | Initial release |
Project page: GC Web Usability theme
General theme - Version 1.3 (Updated)¶
Overview: This feature provides a general theme for the WET core framework.
Benefits:- Uses HTML5 semantic elements and WAI-ARIA to enhance accessibility (HTML5 Web pages only)
- Groups most of the navigation after the content area
- Validates to HTML5 and is XML conformant (HTML5 Web pages only)
- Validates to XHTML 1.0 Strict and is XML conformant (XHTML 1.0 Strict Web pages only)
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.3 | 2012-02-06 | Changed "Breadcrumb" to "Breadcrumb trail" |
| Corrected lang and xml:lang values in the French 1 column XHTML 1.0 Strict page | ||
| Corrected banner text in the French 1 column XHTML 1.0 Strict page | ||
| Removed <div id="cn-leaf"></div> from all 1 column pages | ||
| Removed the gap elements since JS is now used to equalize column heights | ||
| Integrated print CSS into main CSS files (eliminates the need for a separate print CSS file) | ||
| Added breadcrumb to print version of content pages | ||
| Fixed display and printing issues with Date Modified | ||
| Updated to latest version of the WET core framework | ||
| Optimized the source code comments and the use of spacing to significantly reduce the HTML file sizes | ||
| Deleted the include files since they were out of date and no longer relevant | ||
| Deleted the printer-friendly CSS since no longer needed | ||
| 1.2 | 2011-08-08 | Updated to the latest version of the core markup |
| Removed rel="up up up", rel="up up" and rel="up" ("up" removed from HTML5) | ||
| Corrected IE6 display issues | ||
| 1.1 | 2011-02-07 | Separated the General theme from the WET core framework |
| Created include file versions of the General theme | ||
| Updated HTML files to v1.1 of the HTML5 and XHTML 1.0 Strict core markup structures | ||
| Corrected right-to-left and bi-directional support for hidden content | ||
| Corrected IE6 and IE7 display issues | ||
| Increased linked area, corrected appearance, and changed hover effect for h3 links in the left and right columns | ||
| Increased linked area of "Top of Page" links to include the arrow | ||
| 1.0 | 2010-08-09 | Initial release included in the WET core framework |
Project page: General theme
TerraFirma2 theme - Version 1.2 (Updated)¶
Overview: This feature provides a theme for the WET core framework that is based upon the TerraFirma2 template by NodeThirtyThree + Free CSS Templates. This feature is meant to demonstrate the flexibility of WET.
Benefits:- Uses HTML5 semantic elements and WAI-ARIA to enhance accessibility (HTML5 Web pages only)
- Groups most of the navigation after the content area
- Validates to HTML5 (HTML5 Web pages only)
- Validates to XHTML 1.0 Strict (XHTML 1.0 Strict Web pages only)
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.2 | 2012-02-06 | Removed the gap elements since JS is now used to equalize column heights |
| Integrated print CSS into main CSS files (eliminates the need for a separate print CSS file) | ||
| Updated to latest version of the WET core framework | ||
| Optimized the source code comments and the use of spacing to significantly reduce the HTML file sizes | ||
| Deleted the include files since they were out of date and no longer relevant | ||
| 1.1 | 2011-08-08 | Updated to the latest version of the HTML5 core markup |
| Added an h2 to the menu bar nav element | ||
| Corrected validation errors in the XHTML 1.0 Strict version | ||
| 1.0 | 2011-02-07 | Initial release |
Project page: TerraFirma2 theme
Display enhancement features¶
Archived Web Page template - Version 1.0.1 (Updated)¶
Overview: This feature provides an "archive" notice for your archived content. The notice appears at the top of the browser window when the user scrolls away from the top of the page.
Benefits:- Makes it easier to recognize archived content
- Provides instructions on how to request alternate formats
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.0 | 2012-02-06 | Updated to v1.0 of the GC Web Usability theme and v1.3 of the CLF 2.0 theme |
| Added missing "contact us" link | ||
| When clicking on an anchor, scrolling now adjusts to take into consideration the height of the floating top bar. | ||
| Changed message in "Archived Content" box. | ||
| 1.0 | 2011-08-08 | Initial release |
Project page: Archived Web Page template
Charts and graphs support - Version 2.0 (Updated)¶
Overview: This feature dynamically generates charts and graphs from table data.
Benefits:- Easier to update and maintain than image-based charts and graphs
- Supports line charts, area charts, bar graphs, and pie charts
- Visual appearance can be customized through CSS
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 2.0 | 2012-02-06 | Complete re-write and support for complex tables and complex graphic |
| 1.01 | 2011-08-08 | Updated to latest versions of the HTML5 core markup structure, the CLF 2.0 theme, and the base theme |
| 1.0 | 2011-02-07 | Initial release |
Project page: Charts and graphs support
CSS Grid System - Version 1.3 (Updated)¶
Overview: This feature provides a layout grid for dividing up horizontal and vertical space. This helps to create visually appealing layouts by enabling consistent placement of content.
Benefits:- Enables consistent placement of content
- Makes it easier to create visually appealing layouts by helping to apply the “rule of thirds” and the “golden section” to Web page design
- Significantly reduces the amount of effort needed to produce visually appealing Web page layouts (in comparison to building CSS-based layouts from scratch)
- Supports nesting of grids to create complex designs with little effort
- Makes it easier to produce asymmetric layouts for creating visual texture
- Reduces the amount of effort needed to reposition elements and to change display properties (typography, margins, etc.)
- Enables the creation of “magazine” and premium themes for blog platforms
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.3 | 2012-02-06 | Updated to latest versions of the HTML5 core markup structure and the GC Web Usability theme |
| Removed CLF 2.0 working examples | ||
| Corrected several CSS validation errors | ||
| Minor CSS changes and ensured that the demo images and CSS images are still supported for the CLF2 theme. | ||
| Added reference to line-height CSS on example pages | ||
| Changed form element proxmity, fixed table display, added 5 new classes for margin-right (none, small, medium, large, xl) and merged in the decorative CSS that was in grids.css | ||
| Removed font-family declarations because redundant with recent fixes to the CSS presentation layer | ||
| Corrected margins for a few form elements | ||
| Added util-free.css, a version of util.css with the 3rd party icons and images removed | ||
| Temporarily disabled external links CSS until an improved solution can be found | ||
| Corrected opening "Attention:" block in the GC Web Usability theme examples to reflect that the util.css is used by default by the theme | ||
| framework-default.css, framework-large.css, and framework-small.css replaced by framework-responsive.css and framework-static.css | ||
| Removed elastic examples and JavaScript files since no longer supported | ||
| Removed util-free.css | ||
| Adjusted forms CSS per suggest/defect raised. | ||
| Included missing images | ||
| Improved table of contents on demo pages | ||
| Adjusted attributes so there should be no/limited overlap in IE7 | ||
| Spell checked text on demo pages. | ||
| Added new class "update" | ||
| Adjusted padding for IE7 input buttons | ||
| Changed table of contents to h2 | ||
| Updated terms and conditions comments | ||
| 1.2 | 2011-08-08 | Updated to latest versions of the HTML5 core markup structure and the CLF 2.0 theme |
| Corrected display issues caused by recent changes to the WET core framework. | ||
| Corrected an image stretching problem in IE6. | ||
| Removed image stretching | ||
| 1.1 | 2011-02-07 | Improved support for rtl and bidirectional content |
| Adjusted the margin-left for grid-medium to 230px from 225px | ||
| Added download icon for ppt and pot files (PowerPoint) | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: CSS Grid System
Image-free rounded corners - Version 1.1 (Replaced by CSS3 PIE in jQuery Integration)¶
Search term highlighting - Version 1.2 (Updated)¶
Overview: This feature automatically highlights certain words on a Web page. The words to highlight can be set manually or through a simple search form.
Benefits:- Helps users to find certain words on a Web page
- Includes a simple search form that allow users to set which words to highlight
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.2 | 2012-02-06 | Fixed issue where no-ASCII characters (such as french accents) where not showing up in the results |
| Converted the plugin to the parameterless approach | ||
| Added the functionality to specify default terms in the query string | ||
| Updated to v1.0 of the GC Web Usability theme | ||
| 1.11 | 2011-08-08 | Updated to latest versions of the HTML5 core markup structure and the CLF 2.0 theme |
| 1.1 | 2011-02-07 | Now ignores double quotes and round brackets when matching terms (created regex problems) |
| Results message now cleared when minimum length for search terms is not met | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: Search term highlighting
Tracked changes - Version 1.01 (Updated)¶
Overview: This feature visually identifies tracked changes and provides a mechanism for navigating tracked changes in HTML documents.
Benefits:
- Allows readers to see what changes were made to a document
- Allows readers to navigate changes using a toolbar or keyboard
- Makes tracked changes accessible to screen readers
- Visual appearance can be customized through CSS
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.01 | 2012-02-06 | Toolbar now attached to the content area rather than the body |
| Updated to v1.0 of the GC Web Usability theme | ||
| Increased z-index so doesn't get overlapped by the GC Web Usability theme header | ||
| Start position is now set to below the menu bar of the GC Web Usability theme | ||
| 1.0 | 2011-08-08 | Initial release |
Project page: Zebra striping
Zebra striping - Version 1.2 (Updated)¶
Overview: This feature adds zebra stripes to lists and tables by colouring alternate list items and table rows.
Benefits:- Clearly distinguishes individual list items and table rows
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.2 | 2012-02-06 | Added French working example |
| Cleaned up the markup in the working examples | ||
| Added missing CSS properties | ||
| Updated to the latest version of the GC Web Usability theme | ||
| 1.1 | 2011-08-08 | Updated to latest versions of the HTML5 core markup structure and the CLF 2.0 theme |
| Added support for tables with header rows | ||
| Replaced JavaScript-based hover effects with CSS-based hover effects | ||
| Added missing table elements and attributes | ||
| Removed the need to declare the selector in the params var | ||
| Corrected heading structure | ||
| Corrected translation errors | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: Zebra striping
Form interface features¶
Auto-complete for text input fields - Version 1.0 (New)¶
Overview: The focus of this project is to develop and maintain a jQuery plugin for adding auto-complete functionality to specific text input fields by dynamically displaying a list of words that match the user's input.
Benefits:- Progressive enhancement approach
- Uses WAI-ARIA to enhance accessibility
- Supports Firefox, Opera, Safari, Chrome, and IE 7+
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.0 | 2012-02-06 | Initial release |
Project page: Auto-complete for text input fields
Checkbox list enhancement - Version 1.02 (Updated)¶
Overview: This feature enhances the appearance of a checkbox list and makes it easier to use.
Benefits:- Visually groups checkboxes together
- Makes it easier to identify which checkboxes are selected and which are not
- Adds the entire containing row to the selectable area for each checkbox
- Controls the number of checkboxes that are visible (scrollbar used to reach the rest)
- Adds "Select all" and "Deselect all" buttons
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.02 | 2012-02-06 | Updated to v1.0 of the GC Web Usability theme |
| Removed maxRows setting from working example | ||
| 1.01 | 2011-08-08 | Updated to latest versions of the HTML5 core markup structure and the CLF 2.0 theme |
| 1.0 | 2010-08-09 | Initial release |
Project page: Checkbox list enhancement
Deselectable radio buttons - Version 1.0 (Updated)¶
Overview: This feature allows radio buttons to be deselected.
Benefits:- Allows users to make one selection or none at all
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.0.1 | 2012-02-06 | Updated to v1.0 of the GC Web Usability theme |
| 1.0 | 2011-08-08 | Initial release |
Form validation - Version 1.1 (Updated)¶
Overview: The feature provides generic validation and error message handling for Web forms.
Benefits:- Multiple validation methods
- Customized error messages
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.1 | 2012-02-06 | Added examples showing custom/advanced parameters |
| Added support for XHTML | ||
| Limited the effect of the CSS styles to the wet-boew-form-validation container | ||
| Error messages no longer change when focus shifts to/from form fields | ||
| Added required="required" to required form fields (excluding IE6 and IE7) | ||
| Form is hidden initially and only shown if JavaScript is enabled | ||
| Added fallback solution for when JavaScript disabled | ||
| Corrected support for French | ||
| Added support for prefixing summary messages with field names | ||
| Can now handle multiple form instances on a page | ||
| Updated to v1.0 of the GC Web Usability theme | ||
| 1.01 | 2011-09-13 | Corrected IE6/IE7 scripting error |
| Corrected French phone number error message | ||
| 1.0 | 2011-08-08 | Initial release |
Project page: Form validation
Slider control - Version 1.0 (New)¶
Overview: The focus of this project is to develop and maintain a jQuery plugin for creating accessible slider interfaces.
Benefits:- Progressive enhancement approach
- Conforms to WCAG 2.0 AA
- Uses WAI-ARIA to enhance accessibility
- Supports Firefox, Opera, Safari, Chrome, and IE 7+
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.0 | 2012-02-06 | Initial release |
Project page: Slider control
Information sharing features¶
Feedback form - Version 1.3 (Updated)¶
Overview: This feature allows users to submit feedback for a specific Web page or the Web site in general.
Benefits:- Provides a common way for users to provide feedback
- Makes it easier for users to provide helpful feedback
- Hides the fields that users should not complete
- Includes both client-side and server-side form field validation
- Includes the option to send the submitted data to an email account
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.3 | 2012-02-06 | Now depends on the Form validation project for validation and error message handling |
| Updated text to align with the requirement for notices in the Standard on Web Usability | ||
| Added option to select the reason field through the query string | ||
| Added "Other" to the reason field | ||
| Limited effect of CSS to just wet-boew-feedback-form container | ||
| Added fallback solution for when JavaScript is disabled (provides alternate contact methods) | ||
| Removed PHP server-side support (server-side should only be used to do server-side processing of submitted form data) | ||
| Updated to v1.0 of the GC Web Usability theme | ||
| 1.2 | 2011-08-08 | Updated to the latest versions of the HTML5 core markup structure and the CLF 2.0 theme |
| Corrected or removed unnamed sections in HTML5 outline | ||
| Added h2 to group follow-up questions | ||
| Made the default option a blank value in the first drop-down menu | ||
| Fixed validation to produce an error when a blank value is selected in the drop-down menu (HTML only) | ||
| Replaced "/" with "or" under Mobile Information | ||
| Relocated "Contact Information" header to display right above the Name field. | ||
| Removed comment box at the end of the form. Form now only has one message box at the beginning. | ||
| 1.1 | 2011-02-07 | Desktop and Laptop Information now visible by default when reporting a difficulty browsing or navigating |
| Updated to the latest version of the core markup | ||
| Changed the heading text for Personal Information Collection Statement | ||
| Added a link to the Personal Information Collection Statement | ||
| Corrected the display of "(required)"/"(obligatoire)" | ||
| Corrected a few typos in the French version | ||
| Changed "contact" to "contact-coord" | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: Feedback form
RSS feeds widget - Version 1.1 (Replaced)¶
This feature was replaced by Web feeds widget - Version 1.2.
Share widget - Version 1.2 (Updated)¶
Overview: This feature provides a widget for sharing a Web page on various social networks.
Benefits:- Makes it easier for users to share Web pages on various social networks
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.2 | 2012-02-06 | Added functionality to hide the share widget when tabbing out of it |
| Escape key anywhere in the widget closes it | ||
| Now absolutely positioned to the right | ||
| Improved compatibility with responsive layout | ||
| Added hover/focus effect | ||
| Optimized code | ||
| Updated to v1.0 of the GC Web Usability theme | ||
| 1.1 | 2011-08-08 | Updated to jQuery Bookmarks v1.3.4 (from v1.3.1) |
| Enabled support for global configurations using all jQuery Bookmark options within the JavaScript file (applies to all affected pages) | ||
| Enabled support for filtering social media sites, adding email support, providing page-specific descriptions, and hiding icons through the params var | ||
| Updated examples to show a small selection of social media sites, no icons, and all available social media sites | ||
| Added link for closing widget at the bottom of the widget | ||
| Updated the latest versions of the HTML5 core markup structure and the CLF 2.0 theme | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: Share widget
Web feeds widget - Version 1.2.1 (Updated)¶
Overview: This feature provides a widget for aggregating and displaying the entries from one or more Web feeds on a Web page. Supported Web feed formats are Atom, RSS, and Media RSS.
Benefits:- Displays entries from one or more Atom, RSS, and Media RSS feeds on a Web page without the need for a Web feed reader
- Dynamically fetches the top five items of any public Atom, RSS, or Media RSS feed
- Enables cross-promotion and sharing of information between Web sites
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.21 | 2012-02-06 | Updated to v1.0 of the GC Web Usability theme |
| 1.2 | 2011-08-08 | Renamed to Web feeds widget since now supports Atom, RSS, and Media RSS feeds |
| Removed dependency on jParse because of issues with cross-browser XML parsing. | ||
| Streamlined Ajax requests though Google RSStoJSON feed (jGfeeds) service increasing performance and cross-browser support. | ||
| Changed identifier from id to class to allow multiple widgets on the same page | ||
| Updated location of proxy URLs | ||
| Updated to the latest version of the HTML5 core markup structure and the CLF 2.0 theme | ||
| 1.1 | 2011-02-07 | Improved support for rtl and bidirectional content |
| Updated to the latest version of the core markup | ||
| Changed name to "RSS feeds widget"/"Gadget des fils RSS" | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: Web feeds widget
Interface enhancement features¶
Calendar interface - Version 1.2 (Updated)¶
Overview: This feature dynamically generates a calendar interface for navigating a list of events or for selecting a date in a form.
Benefits:- Event calendar provides an interface for navigating a chronological list of events
- Date picker provides an interface for selecting a date in a form
- Uses WAI-ARIA to enhance accessibility
- Calendar uses lists instead of tables for easier navigation
| Version | Date released | Highlights |
|---|---|---|
| 1.2 | 2012-02-06 | Using jQueryUI Theme |
| Moved the "year" field before "month" field in the "Go to" menu | ||
| The "month" field hides months that are out-of-range in the "Go to" menu | ||
| Calendar hides when not in focus and when the ESC key is pressed | ||
| Selecting from the datepicker triggers a "change" event | ||
| Updated to the latest versions of the HTML5 core markup structure and the CLF 2.0 theme | ||
| 1.1 | 2011-08-08 | Corrected several tabbing and keyboard focus issues |
| Improved support for screen readers | ||
| Improved support for Internet Explorer | ||
| Added support for multi-day events | ||
| Added support for displaying only the events for the current month in the events list | ||
| Updated to the latest versions of the HTML5 core markup structure and the CLF 2.0 theme | ||
| 1.0 | 2011-02-07 | Initial release |
Project page: Calendar interface
Coda slider - Version 1.11¶
Overview: This feature shows content to the user one section at a time. A small table of contents can be used to control which section of content is currently shown. A scrolling/sliding effect is used when changing the section content that is shown.
Benefits:- Helps to break down a large amount of content into manageable chunks
- Helps users to focus on the relevant content
- Adds “Next” /“Previous” (Précédent / Suivant) links to simplify navigation
- Can be used with a grid system to create side-by-side layouts
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.11 | 2011-08-08 | Updated to latest versions of the HTML5 core markup structure and the CLF 2.0 theme |
| 1.1 | 2011-02-07 | Improved WAI-ARIA support |
| Corrected a crashing issue in Jaws + IE8 | ||
| Corrected change of focus issues in Jaws | ||
| Improved support for rtl and bidirectional content | ||
| Updated to the latest version of the core markup | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: Coda slider
Dialog Box Enhancement - Version 1.0 (New)¶
Overview: The focus of this project is to develop and maintain a jQuery plugin that enhances the layout, design, and functionality of dialog windows.
Benefits:
- Progressive enhancement approach
- Conforms to WCAG 2.0 AA
- Uses WAI-ARIA to enhance accessibility
- Supports Firefox, Opera, Safari, Chrome, and IE 7+
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.0 | 2012-02-06 | Initial release |
Project page: Dialog Box Enhancement
Expandable/collapsible content - Version 1.3 (Updated)¶
Overview: This feature shows content to the user one section at a time. A small table of contents can be used to control which section of content is currently shown. A scrolling/sliding effect is used when changing the section content that is shown.
Benefits:- Helps to break down a large amount of content into manageable chunks
- Helps users to focus on the relevant content
- Adds “Next” /“Previous” (Précédent / Suivant) links to simplify navigation
- Can be used with a grid system to create side-by-side layouts
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.3 | 2012-02-06 | Removed default border for expand/hide blocks |
| Enabled persistent storage using WET Storage instead of jQuery cookie | ||
| Converted the plugin to the parameterless approach | ||
| Allowed for multiple groups of expand/hide | ||
| Fixed a syntax error that was preventing the initial states to load in IE | ||
| Fixed incompatibility with jQuery version 1.6.2 | ||
| Updated to v1.0 of the GC Web Usability theme | ||
| 1.2 | 2011-08-08 | Added support for saving the state of the expand/hide boxes in a cookie |
| Updated to the latest versions of the HTML5 core markup structure and the CLF 2.0 theme | ||
| Fixed a few display issues | ||
| Added CSS support detection to prevent the plugin from loading when CSS is not supported | ||
| 1.1 | 2011-02-07 | Corrected right-to-left and bi-directional support for hidden content |
| Fixed display issues in IE6/7 | ||
| Added default behaviour that selects the first heading of the child to expand/hide | ||
| Added jQuery cookie plugin to allow saving states of the expand/hide boxes | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: Expandable/collapsible content
Filterable content - Version 1.01 (Updated)¶
Overview: This feature provides an interface for filtering content on a Web page.
Benefits:- Helps users to filter out unwanted content
- Enables users to combine multiple filters at the same time
- Uses WAI-ARIA to enhance accessibility
| Version | Date released | Highlights |
|---|---|---|
| 1.01 | 2012-02-06 | Updated to v1.0 of the GC Web Usability theme |
| 1.0 | 2011-08-08 | Initial release |
Project page: Filterable content
Geomap - Version 1.3 (Updated)¶
Overview: This feature adds a Web map to your page through a simple wrapper for OpenLayers (http://www.openlayers.org/). Anything that is possible with OpenLayers, is also possible with the Geomap feature.
Benefits:- Inserts dynamic maps into any Web page
- Can load map tiles, overlays, and markers from most local or remote sources
- Can perform geographic look-ups
- Can include a toolbar for drawing custom overlays
- Can include geo-tagged RSS feeds
- Supports WMS and WFS protocols
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.3 | 2012-02-06 | Added more context to "Show more" links by including addition information hidden with CSS. |
| Map now zooms to show all displayed data points | ||
| Using aria-live="polite" to help identify what changes when a "Show more" link is clicked. | ||
| Now the content of "Base Layer" and "Overlay" labels is set manually depending on the current locale. | ||
| Moved the search controls below the map in the three-column layout. | ||
| The "show more" links now include additional information hidden by CSS to give more context. | ||
| Replaced the select control for selecting provinces with a group of checkboxes. | ||
| Updated to v1.0 of the GC Web Usability theme and v1.3 of the CLF 2.0 theme | ||
| 1.2 | 2011-08-08 | Added ability to search for data points on the map with the search results provided in a separate data table. |
| Added one and two column example pages | ||
| Corrected validation errors with malformed br elements | ||
| Now loading the keyboard message from the script rather than hardcoding in the page | ||
| Corrected the wording of the keyboard message | ||
| Updated to the latest versions of the HTML5 core markup structure and the CLF 2.0 theme | ||
| 1.1 | 2011-02-07 | Replaced Yahoo! / Google maps with Atlas of Canada WMS in default version |
| Updated to OpenLayers version 2.10 | ||
| Fixed keyboard accessibility issues | ||
| Fixed language detection issue | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: Geomap
Multimedia player - Version 1.3 (Updated)¶
Overview: This feature provides a multimedia player for playing videos on the Web.
Benefits:- Supports multiple players on the same Web page
- Supports WMV and MP4 formats
- Video viewer and toolbar are separated which enables other multimedia players to be used for the video viewer without having to change the toolbar.
- Toolbar is coded with HTML and CSS to allow easy customization of the toolbar appearance and avoid past tabbing issues with Flash-generated controls
- Captions can be loaded from a Timed Text XML file or from Timed Text embedded into an HTML5/XHTML transcript
- Captions scale to the size of the multimedia player
- Default 16:9 ratio preset to optimize video viewing
- Multimedia player resizes to the width and height of the associated thumbnail image
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.3 | 2012-02-06 | Corrected how player width is specified in the HTML so compatible with the CSS Grid System |
| Fixed issue between grids system and the multimedia player | ||
| Resolved issue with focus being invisible when tabbing to the hidden TimedText link | ||
| Dropped support for WMV (now only supporting MP4) | ||
| Timecodes now properly display in Silverlight | ||
| Fixed the logic to hide the buffering text in a small player. | ||
| Added a default step for when the total time is not available. | ||
| Fixed the bug of NaN showing when the timecodes from a video are not available | ||
| Updated to v1.0 of the GC Web Usability theme | ||
| 1.2 | 2011-08-08 | Fixed a display problem when the mediaplayer was placed in a tab or an object that is hidden at load time. |
| Increased the accessibility of the controls by converting them to buttons and using image tags instead of background images. | ||
| Added basic support for audio descriptions | ||
| Added event for media player state changes | ||
| Unified the way the Flash and Silverlight do rewind and fast forward | ||
| Fixed issues with the rewind, mute, and closed caption controls | ||
| Updated to the latest versions of the HTML5 core markup structure and the CLF 2.0 theme | ||
| 1.1 | 2011-02-07 | Added Silverlight support |
| Leveraging the Open Source Media Framework | ||
| Updated to align toolbar width with player canvas width | ||
| Removed deprecated classes for mediaplayer since it now uses the posterimg dimensions as the width/height setting for the canvas window | ||
| Fixed alignment issues with the toolbar digits and text | ||
| Fixed character encoding issues | ||
| Better support for scaling | ||
| Added captions support for timed text embedded in an HTML5/XHTML page | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: Multimedia player
Panorama project - Version 1.02 (Updated)¶
Overview: This feature provides a viewer for 360-degree panoramic images.
Benefits:- Fit large panoramic images into any content area
- Scroll through panorama using the mouse or keyboard
- Conforms to WCAG 2.0 AA
- Progressive enhancement approach
- Support for Firefox, Opera, Safari, Chrome, and IE 6+
Version history¶
| Version | Date released | Highlights |
|---|---|---|
| 1.02 | 2012-02-06 | Updated to v1.0 of the GC Web Usability theme |
| 1.01 | 2011-09-19 | Improved compatibility with latest version of the CSS presentation layer |
| 1.0 | 2011-08-08 | Initial release |
Navigation enhancement features¶
Accessible footnotes¶
Overview: The purpose of the Accessible Footnotes sub-project is to implement a consistent, accessible way of handling footnotes across Government of Canada web sites. The main concept behind this solution is to place footnotes in a definition list, within a dedicated section. Supporting CSS is used to lay out the footnotes and hide navigational aids.
Benefits:
- Conforms to WCAG 2.0 AA
- Progressive enhancement approach
- Compatible with the Web Experience Toolkit (WET)
- Support for Firefox and IE6+
- Support for English and French
- Configurable layout and design
Version history
| Version | Date released | Highlights |
|---|---|---|
| 1.0 | 2012-02-06 | Initial release |
Project page: http://ircan-rican.gc.ca/projects/wet-boew-footnotebas
Active link indicator - Version 1.02 (Updated)¶
Overview: This feature looks at the current file name of the webpage in the URL and then dynamically applies a class to any link on the page that matches that file name. This allows you to indicate a "you are here" effect.
Benefits:- Eliminates the need to hand-code an indication on each page for indicating which section of content the user is on.
- Allows the appearance of each active link to be fully customized.
- Targets the CSS Grid System module named ‘module-menu-section’ and applies the active link feature to any link target that matches the current URL. This can be modified to target any CSS section of content.
- Applies the style to the correct link target, per the URL, even when the linked filenames match (e.g., ../test1/default.html) and (../test2/default.html).
- Compatible with the Expandable/collapsible content feature.
- Allows for a dynamic and localized right hand menu rather than filling the left menu with all the navigational links.
| Version | Date released | Highlights |
|---|---|---|
| 1.02 | 2012-02-06 | Update to v1.0 of the GC Web Usability theme |
| 1.01 | 2011-08-08 | Updated to the latest versions of the HTML5 core markup structure and the CLF 2.0 theme |
| 1.0 | 2011-02-07 | Initial release |
Project page: Active link indicator
Floating toolbar - Version 1.3 (Updated)¶
Overview: This feature provides a floating toolbar at the bottom of the browser window. This toolbar becomes visible when the user scrolls away from the top of the page.
Benefits:- Provides quick and easy access to the "Home" link, the "Top of Page" link, and a search form
- Provides an alternative to including "Top of Page" links throughout the page
- Helps to minimize the number of "Top of Page" links that screen reader users have to listen to
- Can be used with a grid system
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.3 | 2012-02-06 | Reduced extra space at the bottom of the page |
| Fixed display issues in IE6 and IE7 | ||
| Vertically aligned elements in the toolbar | ||
| Updated to v1.0 of the GC Web Usability theme and v1.3 of the CLF 2.0 theme | ||
| 1.2 | 2011-08-08 | Updated to the latest versions of the HTML5 core markup structure and the CLF 2.0 theme |
| Disabled floating toolbar on more mobile devices | ||
| 1.1 | 2011-02-07 | Disabled floating toolbar for mobile devices |
| Floating toolbar now hidden when printing the page | ||
| Updated to latest version of the core markup | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: Floating toolbar
Menu bar - Version 1.0 (Updated)¶
Overview: The focus of this project is to develop and maintain a jQuery plugin for creating an interactive menu bar.
Benefits:- Conforms to WCAG 2.0 AA
- Uses WAI-ARIA to enhance accessibility
- Progressive enhancement approach
- Supports Firefox, Opera, Safari, Chrome, and IE 7+
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.0 | 2012-02-06 | Initial release |
Project page: Menu bar
Open new window/tab - Version 1.3 (Updated)¶
Overview: This feature causes links with rel="external" and rel="internal" to open in a new window or tab. It also adds a standard warning about this change to each link.
Benefits:- Prevents the loss of progress on the current Web page when opening a link
- Prevents the loss of a secure session when opening a link
- Provides a standard advance warning for each link that opens in a new window or tab
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.3 | 2012-02-06 | Now uses target attribute to open new window in HTML5 |
| Added "container" parameter to be able to target links outside #cn-cols (as needed for the XHTML Application Template) | ||
| Updated to v1.0 of the GC Web Usability theme | ||
| 1.21 | 2011-09-13 | Corrected example source code in the working examples |
| 1.2 | 2011-08-08 | Changed trigger from rel="internal" to class="wet-newwindow" because rel="internal" is no longer supported in HTML5 |
| Corrected support for multi-line links in IE7 | ||
| Replaced the external icon with one that combines the internal icon and the arrow from the external icon | ||
| Updated to the latest versions of the HTML5 core markup structure and the CLF 2.0 theme | ||
| 1.1 | 2011-02-07 | Corrected handling for links that include HTML markup |
| Corrected parsing error in JavaScript file | ||
| Limited effect to just the left, centre, and right columns | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: Open new window/tab
Slide out tab widget - Version 1.1 (Updated)¶
Overview: This feature provides a tab at the edge of the content area that can slide out to show content.
Benefits:- Provides a mechanism for providing additional content (such as a table of contents) without wasting valuable space on the page
- Uses WAI-ARIA to enhance accessibility
| Version | Date released | Highlights |
|---|---|---|
| 1.1 | 2012-02-06 | Corrected some issues when zooming/increasing text size |
| Improved default look of lists inside the tab | ||
| Updated to the latest versions of the HTML5 core markup structure and the CLF 2.0 theme | ||
| 1.0 | 2011-08-08 | Initial release |
Project page: Slide out tab widget
Tabbed interface - Version 1.2 (Updated)¶
Overview: This feature dynamically transforms multiple sections of content into a tabbed interface.
Benefits:- Supports multiple tabs on the same page.
- Supports multiple design options.
- Supports setting the default tab
- Supports automatic tab rotation and allows the rotation speed to be configured
- Allows tab panels to be forced to the same height (height of the tallest tab panel)
- Compatible with the CSS Grid System
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.2 | 2012-02-06 | Added tabs-style-7, a full-width (960px) vertical news scroller with the links on the left. |
| Fixed issue that was triggering a click on tab focus which disrupted the keyboard navigation | ||
| Fixed visibility of the keyboard focus indicator | ||
| Updated to a parameter-less approach | ||
| Update to v1.0 of the GC Web Usability theme | ||
| 1.1 | 2011-08-08 | Added 2 styles (tabs-style-4 and tabs-style-5) for more of a slide show effect |
| Added a plugin parameter (autoPlay with default value false) so that the tabs instances can start paused (default) or playing (as before). | ||
| Added a height option to let users override autoHeight to give fixed heights to tab panels. | ||
| Added a second demo page, for tabs in the right column of a 3-col layout. | ||
| Added functionality allowing anchors that are in hidden panels to be activated and focused (parent panel becomes active and then the anchor gains focus) by clicking links pointing to the anchor. | ||
| Improved the Play/Pause code | ||
| Corrected issue that removed the Play/Pause button hidden text once the button was activated | ||
| Improved iPad support | ||
| Improved compatibility with Expandable/collapsible content feature | ||
| Updated to the latest versions of the HTML5 core markup and CLF 2.0 theme | ||
| 1.0 | 2011-02-07 | Initial release |
Project page: Tabbed interface
Personalisation features¶
Client-side CSS - Version 1.1¶
Overview: This feature allows users to change the look of WET-based Web pages to meet their accessibility needs.
Benefits:- Option to make the skip header links visible
- Option to make the Web page expandable
- Option to underline all links
- Option to change all link colours
- Option to use a high contrast content page banner (clf2-nsi2 and general themes)
- Option to use a high contrast Welcome Page message area (clf2-nsi2 theme)
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.1 | 2011-08-08 | Added support for new way of hiding skip header links |
| Added support for the two-column + right nav layout | ||
| Underline removed from links on mouse hover or keyboard focus | ||
| Added English and French working examples | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: Client-side CSS
Customizable interface - Version 1.1 (Updated)¶
Overview: This feature enables the page layout to be customized to meet an individual user's needs.
Benefits:- Allows the users to customize the page layout
- Enables parts of the page layout to be locked in place
- Remembers the customized layout through the use of cookies
- Compatible with the Expandable/collapsible content feature
- Layout can be customized with keyboard or mouse. Tabbing order is updated to reflect the customized layout.
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.1 | 2011-08-08 | Corrected the cookie handling and changed from session-based to persistent |
| Added a parameter for saving the state of the expand/hide boxes | ||
| Changed the 3rd party Fluid plugin so focusable elements have a tabindex value of 1 instead of 0 | ||
| Corrected working example so it displays correctly with JavaScript disabled | ||
| Updated to the latest version of the HTML5 core markup structure and the CLF 2.0 theme | ||
| 1.0 | 2011-02-07 | Initial release |
Project page: Customizable interface
Geo-targeting - Version 1.05 (Updated)¶
Overview: This feature can detect the location of the user and provide content and functionality that is relevant to that location.
Benefits:- Enables Web sites to provide content that is relevant to the user's location
- Improves usability by helping to minimize content that is not relevant to the user
- Support for English and French
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.05 | 2012-02-06 | Added French working example |
| Updated to v1.0 of the GCWU theme | ||
| 1.04 | 2011-12-16 | Changed method of encoding/decoding JSON since old way wasn't working correctly in IE7 |
| Updated to the latest version of the GCWU theme | ||
| 1.03 | 2011-11-30 | Removed dependence on http://jsonip.appspot.com which frequently had over-capacity issues, causing no geo-targeting results to be returned |
| Added session cookie support to minimize the load on http://ipinfodb.com (only queries the 3rd party service once per session) | ||
| Updated to the latest version of the GC Web Usability theme | ||
| 1.02 | 2011-11-04 | Updated to support the latest IPInfoDB API |
| Updated to the latest versions of the HTML5 core markup structure and the GC Web Usability theme | ||
| 1.01 | 2011-08-08 | Updated to the latest versions of the HTML5 core markup structure and the CLF 2.0 theme |
| 1.0 | 2011-02-07 | Initial release |
Project page: Geo-targeting
Helpful 404 error pages - Version 1.0¶
Overview: This feature helps visitors to find content that has been moved to a different folder. This will help to avoid frustrating the user by making it easier to find the new location.
Benefits:- Makes 404 error pages more helpful
- Gives suggestions based upon the requested URL
- Identifies how to contact the Webmaster
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.0 | 2011-08-08 | Initial version |
Project page: Helpful 404 error pages
Style switcher - Version 1.1¶
Overview: This feature provides users with style options so they can configure a Web site to meet their needs.
Benefits:- Helps users to configure a Web site to meet their needs
| Version | Date released | Highlights |
|---|---|---|
| 1.1 | 2011-08-08 | Updated to the latest versions of the HTML5 core markup structure and the CLF 2.0 theme |
| Inserted space between "Colour options" and "expand" | ||
| Use cssEnabled core framework variable to only display colour options when CSS support is detected | ||
| 1.0 | 2010-08-09 | Initial release |
Project page: Style switcher
Utility features¶
Language selector - Version 1.1¶
Overview: This feature provides ASP, Javascript, Perl, and PHP approaches for automatically linking to different language versions of the current page.
Benefits:- Simplifies Web page maintenance by eliminating the need to hard code language links
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.1 | 2011-08-08 | Updated to the latest version of the HTML5 core markup structure and the CLF 2.0 theme |
| Added include variations for SSI and PHP (for added compatibility with SSI/PHP variants) | ||
| 1.0 | 2011-02-07 | Initial release |
Project page: Language selector
Session timeout - Version 1.1 (Updated)¶
Overview: This feature helps Web asset owners to provide session timeout and inactivity timeout functionality.
Benefits:- Timing can be adjusted easily in the parameters
| Version | Date released | Highlights |
|---|---|---|
| 1.1 | 2012-02-06 | Fixed expiry time display issues (minutes rolling over to hours, etc..) |
| Fixed a bug with one of the timer handles being lost, which caused "ghost" AJAX calls to the server. | ||
| Added a new parameter, "refreshOnClick", which will reset the session when the user clicks on the page. The default value is true. | ||
| Changed name of the "noconfirm" parameter to "reactionTime". Note: you can still use "noconfirm", your old configurations won't break. | ||
| Removed a redundant AJAX call to the "logouturl" before redirecting | ||
| Updated to v1.0 of the GC Web Usability theme and v1.3 of the CLF 2.0 theme | ||
| 1.01 | 2011-09-22 | Bug fixes |
| 1.0 | 2011-08-08 | Initial release |
Project page: Session timeout
Web management features¶
Accessibility responsibility breakdown - Version 1.02 (Updated)¶
Overview: This feature provides a breakdown of WCAG 2.0 accessibility responsibilities throughout the Web production chain.
Benefits:- Helps to identify the accessibility responsibilities for each role in the Web production chain
- Provides a tabbed-based interface for quickly focusing on the relevant role in the Web production chain
- Provides a filtering interface for narrowing down responsibilities by conformance level (A, AA, AAA) and by role in the Web production chain
- Uses WAI-ARIA to enhance accessibility
| Version | Date released | Highlights |
|---|---|---|
| 1.02 | 2012-02-06 | Updated to v1.0 of the GC Web Usability theme |
| 1.01 | 2011-12-02 | Updated to the latest tabbed interface and zebra striping features |
| 1.0 | 2011-08-08 | Initial release |
Project page: Accessibility responsibility breakdown
Web Accessibility Assessment Methodology - Version 1.1 (Updated)¶
Overview: This feature provides an assessment methodology that assists with measuring conformance to the Web Content Accessibility Guidelines (WCAG) 2.0 Level A, AA, and AAA Success Criteria.
Benefits:- Helps to calculate the number and percentage of A, AA, and AAA success criteria that were passed
- Uses WAI-ARIA to enhance accessibility
Version history:
| Version | Date released | Highlights |
|---|---|---|
| 1.1 | 2012-02-06 | Added zebra striping and a hover effect for success criteria using the Zebra striping feature |
| Added table of contents using the Slide out tab widget | ||
| Rounded corners now done using PIE (included in jQuery integration) | ||
| Updated to v1.0 of the GC Web Usability theme | ||
| 1.01 | 2011-09-13 | Removed extra comma that was causing issues in IE7 |
| 1.0 | 2011-08-08 | Initial release |
Project page: Web Accessibility Assessment Methodology