Tabs
Under review
We are in the process of reviewing this component, content, or guidance to make improvements
Tabs let users switch between groups of content that relate to each other. Tabs allow one section of content to display at a time on a page. This may help reduce cognitive overload for some users.
There are two types of tabs:
Horizontal tabs work well with a small number of content sections. Horizontal tabs work better on desktop because desktop has limited horizontal space.
Vertical tabs work well for a large number of content sections. They also work well if you expect your content sections to grow. Vertical tabs work better on mobile because mobile has limitless vertical space.
When to use
- Use tabs when you can separate your content into sections.
- Use tabs if users don’t need access to all the content at once.
When not to use
- Don’t use tabs for vital services. Users need to see all vital services information at once.
- Don’t use tabs if the user must read all the content, like a step-by-step process.
- Don’t use tabs if the user needs to compare information. This requires the user to memorize too much information.
Navigation roles
Tabbing through navigation
Add role="navigation" to the most logical parent container of the <ul>. Or wrap a <nav> element around the whole navigation. Don’t add the role to the <ul> itself. This prevents assistive technologies from announcing it as a list.
Reading horizontal and vertical tabs
Give the containing tab element an attribute of role="tablist". Give the tab element itself the attribute role="tab". The tab serves as a label for the tab panels. The content of a tab has the attribute role="tabpanel".
Vertical tabs should use aria-orientation="vertical". Horizontal tabs can use aria-orientation="horizontal". But it is not required since this is the default value.
Keyboard interaction for tabbing
Active tab element receives the focus when focus moves into the tab list. Focus moves to the next tab element in the tab list. Tab list focus is in sequential order.
When focus is on a tab:
- Left arrow: Moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. This activates the new focused tab.
- Right arrow: Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. This activates the new focused tab.
- Space or Enter: Activates the tab if it was not activated already on focus.
- Home (Optional): Moves focus to the first tab. This activates the new focused tab.
- End (Optional): Moves focus to the last tab. This activates the new focused tab.
- Shift + F10: If the tab has an associated pop-up menu, opens the menu.
When focus is on a tab element in a vertical tab list:
- Left arrow: Moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. This activates the new focused tab.
- Right arrow: Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. This activates the new focused tab.
Don’t use role="tablist", role="tab", or role="tabpanel" attributes for navigation bars, even if they are visually styled to look like tabs. Navigational links are not the expected function of a tab for users on assistive devices. Instead, use role="navigation" on the parent container of the <ul>, but not the <ul> itself. Another option is to use a <nav> element around the navigation bar.
- Use clear short tab labels.
- Order tabs so the first tab is the most relevant to users.
- Put the tabs in a logical order for users.