Working examples
Take a look at our provisional features and tell us your views via GitHub.
| Name | Category | Description | Keywords |
|---|---|---|---|
| Accessibility Conformance Report Methodology | Other | This method describes an iterative approach for performing multiple specialized assessments and producing an Accessibility Conformance Report (ACR). | acr |
| Accessibility responsibility breakdown (WCAG 2.0) | Other | Provides a breakdown of WCAG 2.0 accessibility responsibilities throughout the Web production chain. | arb-rra |
| Add to Calendar | Plugins | Adding an event to a calendar (google, Apple, Android, Outlook and others). | add-cal |
| Archived - Archived information | Other | Helps users identify Web pages that have been archived online. | archived |
| Background image | Plugins | Apply a background image from the given URL in parameter or as per the srcset information. | bgimg |
| Base de la BOEW | Other | Exemples pratiques des méthodes natifs de la base de la BOEW. | core |
| Basic HTML | Plugins | Enable Basic HTML Mode | disable |
| Calendar of Events | Plugins | Dynamically generates a calendar interface for navigating a list of events. | cal-events |
| Charts and graphs - Customization | Plugins | Customization, custom presets and multiple charts and graphs types. | charts |
| Charts and graphs - Customizing pie charts | Plugins | Customizing a pie chart to create a donut chart. | charts |
| Charts and graphs - Labels and reference values | Plugins | How to manage the chart labels and the reference values used to determine the points on the chart. | charts |
| Charts and graphs - Simple and easy | Plugins | Dynamically generates charts and graphs from table data. | charts |
| Charts and graphs - Specific test cases | Plugins | Specific test cases for testing purposes. | charts |
| Checklist for mobile accessibility tests - Web Experience Toolkit | Other | A guide for day-to-day mobile accessibility testing – one should be able to answer ‘yes’ to each question. | checklist |
| Collapsible alerts | Plugins | Make alerts collapsible by users | collapsible-alerts |
| Conditional template | Plugins | Map JSON content by following a conditional template. | data-json |
| Country Content | Plugins | A basic AjaxLoader wrapper that inserts AJAXed-in content based on a visitor's country as determined by country.is | country-content |
| Data Ajax | Plugins | A basic AjaxLoader wrapper that inserts AJAXed-in content. | data-ajax |
| Data Fusion Query | Plugins | Map a query parameter value into an input value. | data-fusion-query |
| Data Inview | Plugins | Displays an overlay when a section moves out of the viewport. | data-inview |
| Data JSON | Plugins | Insert content extracted from a JSON file. | data-json |
| Data Picture | Plugins | Event driven port of Picturefill | data-picture |
| Datalist polyfill (auto-complete) | Polyfills | Emulates input list attribute and datalist element support for browsers that do not have support. This adds auto-complete functionality to specific input fields by dynamically displaying a list of words that match the datalist. | datalist |
| Datalist polyfill (auto-complete) - Dynamic | Polyfills | Demonstrates how to dynamically update the contents of the datalist element, based upon user input. Particularly useful where there are a large number of auto-complete suggestions. | datalist |
| Details closed on medium view and down | Plugins | Keep selected details elements closed on medium view and smaller. | details-close |
| Details closed on small views | Plugins | Keep selected details elements closed on small view and down. | details-close |
| Details/summary polyfill (expandable/collapsible content) | Polyfills | Emulates details and summary element support for browsers that do not have support. The details and summary elements allows content to be expanded and collapsed. | details |
| Dismissable content | Plugins | Make content dismissable by users. | dismissable-content |
| Equal height | Plugins | A plugin for responsive equal height. | equalheight |
| Equal height (pure CSS) | Plugins | A plugin for equal height grids. | eqht-css |
| Exit script | Plugins | Redirects users to another sites. | exitscript |
| Facebook embedded pages | Plugins | Helps with implementing Facebook embedded pages. | |
| Favicon | Plugins | This plugin provides the ability to add and update the favicon's on a web page. | favicon |
| Feedback form | Other | Allows users to submit feedback for a specific Web page or Web site. | feedback |
| Feeds | Plugins | Aggregates and displays entries from one or more Web feeds. | feeds |
| Filter | Plugins | Filters through content and only show content that match a certain keyword. | filter |
| Footnotes | Plugins | Provides a consistent, accessible way of handling footnotes across websites. | footnotes |
| Form validation | Plugins | Provides generic validation and error message handling for Web forms. | formvalid |
| Geomap | Plugins | Displays a dynamic map over which information from additional sources can be overlaid. | geomap |
| Geomap - prior v4.0.30 | Plugins | Displays a dynamic map over which information from additional sources can be overlaid. | geomap |
| Hello world plugin example | Other | A quick tutorial on how you can create your own WET plugin. | helloworld |
| Input type="date" polyfill (date picker) | Polyfills | Emulates <input type="date"> support for browsers that do not have support. This dynamically generates a calendar interface for selecting a date in a form. | datepicker |
| Input type="range" polyfill (slider control) | Polyfills | Emulates <input type="range"> support for browsers that do not have support. The <input type="range"> element displays a slider control bar. | slider |
| JSON Manager | Plugins | Manage dataset and apply JSON Patch | jsonmanager |
| Lightbox | Plugins | Display images and other content in a dialog box, either individually or as part of a gallery. | lightbox |
| MathML polyfill | Polyfills | Emulates MathML support for browsers that do not have MathML support. | mathml |
| Menu | Plugins | Provides an interactive menu with optional sub-menus. | menu |
| Merge Server-Client Errors | Plugins | Merge server errors with client errors | formvalid-server |
| Meter polyfill | Polyfills | Emulates meter element support for browsers that do not have support. The meter element displays a scalar measurement in a known range. | meter |
| Multimedia Player - Audio-only | Plugins | Provides an accessible audio player for embedding audio into web pages. | multimedia |
| Multimedia Player - Video | Plugins | Provides an accessible multimedia player for embedding video into web pages. | multimedia |
| Multimedia Player - YouTube | Plugins | Provides an accessible multimedia player for embedding YouTube video into web pages. | multimedia, youtube |
| Overlay | Plugins | A flexible, responsive overlay plugin. | overlay |
| Paginate | Plugins | Adds pagination at the bottom of a list of items | paginate |
| Postback | Plugins | Submit web form through AJAX call. | wb-postback |
| Prettify | Plugins | Provides syntax highlighting of source code snippets in an HTML page using google-code-prettify. | prettify |
| Progress polyfill (progress bar) | Polyfills | Emulates progress element support for browsers that do not have support. The progress element displays the progress of a task. | progress |
| Randomize | Plugins | Randomly picks one of the child elements. | randomize |
| Session Timeout | Plugins | Helps Web asset owners to provide session timeout and inactivity timeout functionality. | session-timeout |
| Session Timeout with signInUrl option | Plugins | Helps Web asset owners to provide session timeout and inactivity timeout functionality. | session-timeout-signin |
| Share widget | Plugins | Facilitates sharing Web content on social media platforms. | share |
| Steps Form | Plugins | Automatically converts a form into steps. | stepsform |
| Tabbed Interface | Plugins | Dynamically stacks multiple sections of content, transforming them into a tabbed interface. | tabs |
| Tabbed Interface - Carousel | Plugins | Dynamically stacks multiple images and captions into a carousel (or slider) widget. | tabs, carousel |
| Table Filters | Plugins | Integrates the DataTables plugin into WET providing searching, sorting, filtering, pagination and other advanced features for tables. | table filters |
| Table Validator | Other | Web editor tool that helps to produce tables that conform to WCAG 2.0 | tablevalidator |
| Tables | Plugins | Integrates the DataTables plugin into WET providing searching, sorting, filtering, pagination and other advanced features for tables. | tables |
| Tag filter | Plugins | Filters through content and shows/hides content that match a certain tags. | filter |
| Template HTML 5 | Plugins | Leverage HTML 5 template element by using the data json plugin. | data-json |
| Text highlighting | Plugins | Automatically highlights certain words on a Web page. The highlighted words can be selected via the query string. | texthighlight |
| Toggle | Plugins | Allows a link to toggle elements between on and off states. | toggle |
| Transitions | Other | CSS-based transitions | transitions |
| Twitter embedded timeline | Plugins | Helps with implementing Twitter embedded timelines. | |
| Utilities | Other | Utilities page including working examples. | utility |
| WET core | Other | Working examples of WET core's built-in methods. | core |
| Web Accessibility Assessment Methodology (Level AA) | Other | Provides an assessment methodology that assists with measuring conformance to the Web Content Accessibility Guidelines (WCAG) 2.1 Level A, and AA Success Criteria. | wamethod |
| Web Accessibility Assessment Methodology (Level AAA) | Other | Provides an assessment methodology that assists with measuring conformance to the Web Content Accessibility Guidelines (WCAG) 2.1 Level A, AA, and AAA Success Criteria. | wamethod |
| Zebra striping | Plugins | Zebra striping for tables | zebra |
| Base theme | Themes and style | A theme template to aid in the creation of new themes. | theme-base |
| Canada.ca theme | Themes and style | This theme implements the layout and design requirements for Canada.ca. | GCWeb |
| Government of Canada Intranet theme | Themes and style | This theme adapts the Government of Canada Web Usability theme for intranet sites. | theme-gc-intranet |
| Government of Canada Web Usability theme | Themes and style | This theme implements the requirements of the Standard on Web Usability and is recommended for use on all Government of Canada websites (except for Canada.ca). | theme-gcwu-fegc |
| Open Government Platform (OGPL) theme | Themes and style | The Open Government Platform (OGPL) theme was developed to support the Open Government Platform (OGPL). | theme-ogpl |
| Web Experience Toolkit (WET) theme | Themes and style | This theme provides an example implementation of the Base Theme. | theme-wet-boew |
| Jekyll variant | Variants | Adapts WET for use with Jekyll. | jekyll |
| Do action | Canada.ca theme plugins | Execute action, like filter a table, based on pre-established set of configuration. (Documentation) | gcweb/doaction |
| Field flow | Canada.ca theme plugins | Transform a basic list into a selectable list. (Documentation) | gcweb/fieldflow |
| Field flow advanced | Canada.ca theme plugins | How to go beyond with field flow. (Documentation) | gcweb/fieldflow |
| Field flow basic configuration | Canada.ca theme plugins | How to use field flow to create small scale user interaction. (Documentation) | gcweb/fieldflow |
| URL Mapping - Ajax | Canada.ca theme plugins | Execute pre-configured ajax action based on url query string. (Documentation) | gcweb/urlmapping |
| URL Mapping - Patching JSON | Canada.ca theme plugins | Execute pre-configured patches action based on url query string. (Documentation) | gcweb/urlmapping |
| URL Mapping - Table filtering | Canada.ca theme plugins | Execute pre-configured table filtering action based on url query string. (Documentation) | gcweb/urlmapping |
Documentation of WET 4 core
- Date modified: