# Tabs

Tabs allow for content of a similar context to be separated into different panes, which a user can view one at a time. They allow for saving of screen real estate, but a user can only view content within one tab pane at a time.

# Description

A tab component consists of a horizontal or vertical set of tab controls that sit adjacent to a tab pane which contains different content depending on the tab control currently selected. Vertical tabs are generally only appropriate for tablet or desktop layouts.

Tab controls will generally have a text label that describes the content available within the tab pane.

The active tab control, i.e. the tab control associated to the content currently within the tab pane, should be differentiated from an inactive tab control so a user can easily understand which content currently populates the tab pane. Inactive tab controls are still selectable by the user, so should not be hidden or appear disabled.

Different tab panes should be related, but tabs are not appropriate if the user needs compare content between separate panes or needs to access content within panes at the same time. If the tabs appear unrelated, users will interpret them as site navigation.

# Must include

• Label - to indicate contents of tab
• Indicator - to indicate which tab is selected

# Optional

Container box - where the tab label and indicator is housed.

# Rules

• Use short 1-2 word labels for tab controls - particularly if they are laid out horizontally
• Ensure the active tab is visually differentiated from inactive tabs - use more than colour alone, consider font weight or a visual indicator (e.g. underline).
• Have clearly visible and readable inactive tabs
• Design tabs that are parallel in nature.
• Avoid scrolling/panning within tab panes so that users don’t end up with nested scrollable areas, if this is unavoidable e.g. within a map, the user should have * alternate controls to navigate within the tab.
• Avoid horizontal scrolling of tab controls so user is clear of number of tabs available to select
• Tab controls should occupy a single row or column

# To consider

• Text labels can be used in conjunction with icons if they help enhance users understanding of content within the tab pane.
• Think mobile first when considering appropriate layout, no. of tab panes or length of labels

# Accessibility

• Tabs should have an appropriate ARIA label to support screen readers and help users understand the tab pane.
• The selected tab should have an appropriate ARIA label.
• Users can move through the tabs using the arrow keys and select/deselect them using the keyboard.
• Tabs have a focus state to highlight which one is currently highlighted in the tab pane.