JavaScript add-ons - Design guide

Indicate that a page has been archived.

Correct use

Refer to: Archiving content documentation

Add the auto-complete feature to a text input field.

Correct use

Refer to: Auto complete for text input fields documentation

This feature dynamically generates a calendar interface for selecting a date in a form.

Correct use

Refer to: Date picker documentation

This feature dynamically generates a calendar interface for navigating a list of events.

Correct use

Refer to: Events calendar documentation

This feature dynamically generates charts from table data.

Correct use

Refer to: Charts and graphs documentation

Allows content to be expanded and collapsed.

Correct use

• Use to hide secondary or tertiary content, not primary content
• Do not use as a means to tidy up the look of your page. If the page is deemed too busy, consider other options like separating the content over several pages or chunking the information in a more aesthetically pleasing way.
• Refer to: Expand/collapse content documentation

This component allows users to submit feedback for a specific Web page or the Web site in general.

Correct use

Refer to: Feedback form documentation

This component provides a consistent, accessible way of handling footnotes across websites.

Correct use

Refer to: Footnotes documentation

This component provides generic validation and error message handling for Web forms.

Correct use

Refer to: Form validation documentation

Displays a dynamic map over which information from additinal sources can be overlaid.

Correct use

Refer to: Geomap documentation

Creates a gallery out of pictures or content.

Correct use

Refer to: Light box documentation

The MathML polyfill emulates MathML support in browsers that lack MathML support.

Correct use

Refer to: Mathematical/scientific formula display documentation

The HTML5 meter element displays a scalar measurement in a known range.

Correct use

• The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.
• This is also known as a gauge.
• The meter element should not be used to indicate progress (as in a progress bar). For that role, HTML provides a separate progress element.
• The meter element also does not represent a scalar value of arbitrary range — for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value.
• Refer to: Meter documentation

This feature provides a multimedia player for embedding accessible video and audio into web pages.

Correct use

Refer to: Multimedia player documentation

The HTML5 localStorage object is used to store data persistently (no expiration date). This component adds support for this object in browsers that do not already have native support.

Correct use

Refer to: Persistent storage documentation

The HTML5 progress element displays the progress of a task.

Correct use

Refer to: Progress bar documentation

This component helps Web asset owners to provide session timeout and inactivity timeout functionality.

Correct use

Refer to: Session timeout documentation

This component facilitates sharing Web content on social media platforms.

Correct use

Refer to: Share widget documentation

This component provides a tab at the edge of the content area that can slide out to show content.

Correct use

Refer to: Slide out tab documentation

The <input type="range" /> allows to display a slider control bar.

Correct use

Refer to: Slider control documentation

Syntax highlighting of source code snippets in an html page using google-code-prettify.

Correct use

Refer to: Prettify source code documentation

This component displays multiple pieces of content into a tabbed interface.

Correct use

Jakob Nielsen, a top usability expert, wrote the article Tabs, Used Right (external link), which outlines the correct use of tabs. In this document, he states that tabs should:

• Not use all-capital letters for the labels;
• Use only only one row of tabs that are on top of the panel;
• Alternate only between views within the same type of context, and not navigate to different areas;
  • Tabs should logically chunk information so users can easily predict what they’ll find. They should not have to simultaneously refer to and compare content.
• Have a highlighted Currently selected tab — with unselected tabs that are clearly visible and readable;
  • The Current tab should connect to the content area.
• Use plain language and have short titles;
• Use a parallel naming structure.
  Correct use = parallel labels:
  • Tax forms
  • Charity forms
  • All forms
  Incorrect use = unrelated labels:
  • Forms
  • Offices
  • FAQs
• Have an obvious scope that the tabs control;
• Have a quick click response time (ideally <0.1 s).
• Refer to: Tabbed interface documentation

The table enhancement plugin adds advanced functionality such as sorting, filtering, pagination to tables.

Correct use

Refer to: Table enhancement documentation

This component automatically highlights certain words on a Web page. The words to highlight can be set through the query string.

Correct use

Refer to: Text highlighting documentation

Provides a widget for aggregating and displaying the entries from one or more Web feeds on a Web page.

Correct use

Refer to: Web feeds documentation

Adds zebra stripes to ordered list, unordered list, definition list, table rows, table columns and provide visual support for the complex data table relationship.

Correct use

Refer to: Zebra striping documentation