Tabbed interface

Overview

Project Lead: Stephane Berube (@berubs)

Purpose

The tabbed interface can be modified to suit different sizes and displays

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
  • Conforms to WCAG 2.0 AA
  • Uses WAI-ARIA to enhance accessibility
  • Progressive enhancement approach

Recommended usage

Use When

  • To display multiple pieces of content with the same format.
  • The tabbed interface can be used as a slideshow to display images.

Appearance

When using this feature to display images, corresponding numbers should be displayed that indicate which image is currently being displayed, as in this example on the Canadian Crown website.

Behaviour

When using the tabbed interface to display text (as in this example on pwgsc.gc.ca), the transition speed must allow enough time for the user to read the text displayed.

When used to promote web content, selecting text or an image should take the user to a new page.

Users must be able to pause (or re-start) rotating tabs.

Content

When used to promote web content, selecting text or an image should take the user to a new page.

Implementation

  • Create a tab container for each set of tabs using <div class="wet-boew-tabbedinterface"></div>.
  • Add <div class="tabs-panel"> to each tab container and include <div id...> for each tab panel. The id for each tab panel must match the href for the associated tab (following the "#" symbol). For example:
<div class="wet-boew-tabbedinterface">
    <ul class="tabs">
        <li><a href="#tab1">National events</a></li>
        <li><a href="#tab2">Regional events</a></li>
        <li><a href="#tab3">Local events</a></li>
    </ul>
    <div class="tabs-panel">
        <div id="tab1">
            <p>tab 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p><a href="#">fake link</a></p>
        </div>
        <div id="tab2">
            <p >tab 2 - Consectetur adipiscing elit. Praesent sit amet felis.</p>
            <p><a href="#">fake link</a></p>
        </div>
        <div id="tab3">
            <p>tab 3 - Praesent sit amet felis. Etiam malesuada.</p>
            <p><a href="#">fake link</a></p>
        </div>
    </div>
</div>

Optional: Change the default appearance of a tab set by adding one of the following classes to the tab container:

  • tabs-style-1: Stylized horizontal tabs design
  • tabs-style-2: Horizontal news scroller design
  • tabs-style-3: Vertical news scroller design with links on the right
  • tabs-style-4: Slideshow design with text-based links below
  • tabs-style-5: Slideshow design without text-based links

Note: tabs-style-2 and tabs-style-3 have a news scroller design with no inner padding so images can have a full bleed. Paragraphs and other text-based content must be wrapped by <div class="tabs-panel"> to pad them in. For example:

Optional: Specify which tab is selected by adding class="default" to that tab. For example:

<ul class="tabs">
    <li><a href="#tab1">National events</a></li>
    <li class="default"><a href="#tab2">Regional events</a></li>
    <li><a href="#tab3">Local events</a></li>
</ul>

Optional: Add class="auto-height-none" to the tab container to disable forcing all tab panels to be the same height:

<div class="wet-boew-tabbedinterface auto-height-none">

Optional: Add class="cycle-fast", class="cycle" or class="cycle-slow" to the tab container to add a "Play"/"Pause" ("Jouer"/"Pause") button for automatically rotating the tabs. The tabs rotate every 2 seconds for cycle-fast, every 6 seconds for cycle and every 8 seconds for cycle-slow. A different rotation delay can be specified using data-wet-boew='{"cycle":10000}' where the value for cycle is the delay in milliseconds. The tabs will automatically rotate by default unless class="auto-play-none" is added to the tab container.

<div class="wet-boew-tabbedinterface cycle auto-play-none">

Optional: Add class="animate-fast", class="animate" or class="animate-slow" to the tab container for a fast, medium or slow fade effect when transitioning between tab panels.

<div class="wet-boew-tabbedinterface animate">

Optional: Implement complex layouts within the tab containers. When creating parent/child grids, you must use row-start and row-end. There are rare times where this may not be desirable. For example with drag and drop widgets, each grid cell must be the same size so the addition of row-start or row-end on some of them may cause layout problems when the box is moved from one column to another. Therefore, you can use the class >embedded-grid. This CSS acts as a container for the tabs and you do not need to put them in a grid cell. It also removes the borders so the full with of the space is available.

Examples

Development

The tabbed interface is dependent upon EasyTabs.js (MIT license, GPL license), EqualHeights (GPL license) and the jQuery Metadata plugin (MIT license, GPL license).

The code for the tabbed interface is located in several places within the source folder of WET:

Known Issues

  • Content that is hidden by default can be missed by users
  • Extra user effort is required to view all the content
  • A large page load may initially show all the tab content prior to the feature restyling it.
  • Tab headings may have accessibility issues if they are not descriptive enough (e.g., using "1", "2", and "3" for the the news slider). Use the wb-invisible class to make tab headings more descriptive without affecting the appearance. For example: 
    1<span class="wb-invisible"> Top news today</span>
2<span class="wb-invisible"> Did you know?</span>
  • Adding transition effects to the tabs (e.g., elegant fade in/out) creates the risk of a user selecting two tabs in a row before the transition effect for the first tab can complete. In such a situation, the second tab will be selected but the first tab panel will be displayed. Because of this risk, this feature does not demonstrate, nor recommend adjusting the animate setting (currently set to "false").
  • Usability testing revealed critical issues with the tabbed interface when used with text. Users expect that when they select text, they will be taken to a new page.

Version History

References