Intelligence Community Design System

We’ve made sure that tabs are easy to use for people who use a keyboard to navigate. The tab bar acts as a single focusable element, whilst its tabs can be individually focused using the arrow keys. This avoids the user having to move focus through every tab in order to reach the content.

Instead, they move focus into the tab bar, focus on the tab they wish to view using the arrow keys, select it using the space or enter key, and can then directly move focus to the content within the selected tab. Using shift+tab moves focus back to the tab bar and highlights the currently selected tab.

Using the home key moves focus to the first tab in the tab bar, and the end key moves focus to the last tab.

When a compact version of a tab bar is displayed, the tabs can be accessed using the same keyboard functionality described above. When focus is moved to different tabs, the compact tab bar automatically scrolls to show the currently focused tab in the visible area.

Using the arrow keys in screen readers allows people to move between all elements of the page. When a selected tab is focused on, the down arrow key would tell the screen reader to move to the first element within the tab's content. Each tab container is labelled by the tab it relates to so that the relationship between them is clear when using a screen reader.

This tabs component is based on the following resources:

We've tested this component against WCAG 2.2 Level AA. It's been tested with NVDA and VoiceOver, and several different users with different interaction methods.