Tabs

Use Cases:

Use tabs only if one or more of the following conditions is met:
• Users do not need to see more than one section at a time (e.g., to compare content on different panels)
• The content on the hidden panels is supplementary only; never assume users will see it if they visit the page
• The number of panels are few enough and their labels are short enough that they’ll all fit horizontally on one line without wrapping, even on a narrow mobile or tablet screen

Guidelines:

Use this interactive layout tool to add informational hierarchy to a page, to help users prioritize related content by concealing non-essential details that supplement the default-open first panel.

Tabs can be especially helpful for people who use a set of information regularly, allowing them to switch quickly between the panels to help them perform tasks.

Avoid:

Avoid using tabs merely to shorten a page that most users would want to read in its entirety. Tabs hide content, and many users will not notice content that’s hidden behind unrevealed tabs.

Because tabs present barriers to reading and require extra clicks to reveal information, they’re best used when the first panel of content is all that is necessary for most users.

If a page feels too long and you’re looking for a way to shorten it, consider breaking it up into multiple pages instead of using patterns that hide content, like tabs or accordions.

Accessiblity:

Tabs add complexity for all users and can make it more difficult for people using keyboard browsing or screen reading software to understand and navigate the content on a page.

Use clear, descriptive labels for each tab, and add headings to the content at the beginning of each panel to help users orient themselves, especially on small screens and screen readers.

The pattern is designed so that when focused on a tab, the user can tap the arrow keys to navigate to and select the other tabs, according to W3C best practice. This is also consistent with the behavior of the WDS search page.