Tabs - Usage

Basic Guidelines

Tabs are used to structure content while keeping pages short, enabling users to explore more detailed content.

Tabs should not be used for

• Navigation — the Tabs shouldn't load a new page or change the page's position
• Filtering — only one Tab can be active, which is not sufficient as a proper filter function
• Comparison — the user shouldn't need to memorise content between tabs to compare products
• Showing progress — Tabs should not be used if the content has to be read in a particular order.

Behaviour

The first section is usually the most relevant and therefore active by default. One Tab item is always active at any one time. A tab cannot be unselected when it's clicked on.

If the Tabs are too wide for the viewport, the text will be clipped and the Tabs become scrollable. For devices that don't support horizontal scrolling (i.e. Windows machines), a native scrollbar will be shown to enable the users to navigate through all Tabs.

Content Guidance

Tabs provide content that can be explored. The labels and content of the tabs should be cohesive and equal. If they are too different, they might get mistaken as navigation.

Keep tab labels clear and short, ideally just one or two words long. A second line if text can be used if it helps clarity.

Alignment

Tabs are set to span the whole viewport and margins are built in. The Tab items stretch depending on their content. The Tabs usually sit centre aligned on a page.

Content overflow in Figma

Tabs are centre-aligned by default, assuming that all content fits the viewport. If the content is wider than the viewport, the content overflow variant should be used to align the Tabs to the left hand side.

Tabs are already set up to scroll horizontally in prototypes. The component frame needs to be set to the width of the viewport for the scrolling to work in a prototype.

Colour Usage

The trim can be changed to any gradient from the Sky palette (solid colours other than primary and white are currently not supported).

Icon Usage

Icons are supported within Tabs and sit centre-aligned above the text label. If Icons are used, they need to be used on every Tab item for consistency.

Notes on Accessibility

Keyboard interaction

Tabs items activate automatically when they receive focus.

Within the list of tab items, the left and right arrow keys are used to move to the next or the previous tab item. On Windows keyboards, the Home key can be used to jump to the first tab item, and the End key can be used to jump to the last one.

The Tab key is used to move from the tab items to the tab panel (= the content) below.

Screen reader interaction

The screen reader will announce:

• Name of the individual tab item
• Describe that this tab item is selected
• Tab item number and total number of items

The user can choose to navigate to the tab panel content, and the screen reader will announce:

• Name of the individual tab item, describe that this is the tab panel

When tabbing further or highlighting the text, the screen reader will announce:

• Content within the panel

Example: