Tabs

The Tabs component organizes multiple sections of related content so a client can view one section at a time.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Usage

Tabs are used to navigate between multiple sections of related content without leaving the context of the page.

Guidelines

  • There needs to be at least two Tabs buttons, but not more than seven.
  • The text of each Tabs button cannot be on two lines so must be kept short.

Anatomy

  • Tabs must contain Tabs buttons.
  • Each Tabs button must be connected to a content panel.

Accessibility

  • Clients can activate individual tabs using the SPACE or ENTER keys.
  • Clients can navigate through the Tabs with LEFT/RIGHT and UP/DOWN arrow keys.
  • Clients can jump to the first Tabs button with HOME and to the last Tabs button with END.
  • The TAB key moves the client into the content associated with the Tabs button and SHIFT+TAB moves focus back to the button.