Module Tabs

Working Solution · Last modified July 15, 2009

Using a single-line row of links formatted as tabs that are immediately stacked above the content is a solution to provide access to content if limited space is available and page refreshes are not desired. The active pane needs to be visualized and category titles should be short and less than ten. Module tabs can be used if the content does not need to be viewed in context with each other. Using tabs builds on a real-world metaphor of file folders.


Delicious Bookmark this on Delicious

What Problem Does This Solve?

The user needs to navigate through one or more stacked panes of content without refreshing the page.

When to Use This Pattern

  • There are multiple panes of content, but there is space to only show one content pane at a time.
  • The different panes of content do not need to be viewed in context with each other.
  • You need a way to switch between the content without going to a different page. For navigating to different pages within a site, use Navigation Tabs instead.
  • There are 2-10 category titles.
  • The category titles are relatively short and predictable.
  • It is important to communicate which content pane is currently being viewed.

What's the Solution?

  • Present a single-line row of links immediately above the stacked panes of content they will control.
  • Never stack multiple rows of tabs to control a single piece of content.
  • Separate the links with the vertical bar character "|" or through an equivalent graphic.
  • Always show one tab as selected with its content visible
  • Indicate the selected tab by highlighting the background of the "cell" around it. Yahoo adds a "pointer" to the bottom of the selected tab.
  • The content should be visually connected to the tab it is associated with and be visually bounded (usually by a box.)
  • Only one content area may be visible at a time.

Maintaining the Metaphor

  • Tabs should appear in the same location as the user clicks from one tab to another.
  • Wherever possible, do not refresh the entire page upon selection of a new tab.
  • Selecting a tab will not affect other parts of the page.
  • Selecting a tab will not navigate to a different page or perform an action (beyond switching the visible content.

Why Use This Pattern?

  • Tabs provide context. They give visual indication of a user's location within a body of information.
  • Tabs build on a real world metaphor. The selected state is reinforced with the file folder tab metaphor of a folder physically in front of the others in the set.
  • Tabs provide navigation. They provide the ability to navigate alternate content views.

Accessibility

  • Allow the user to navigate across the tabs in a logical order with the Tab key.
  • A focused tab can be selected with the Enter key.
  • Indicate the active tab (pane) by one of these alternative means (in addition to visual indication):
    • Include a TITLE attribute with the word "active" into the link that was just activated.
    • Include an invisible graphic with an ALT attribute and a word "active" into the link.
    • Attach an ALT attribute with the word "active" to Yahoo's graphic that indicates active link.