Tabs
Parallel views in one space, which works only when users never need to compare across them.
Definition
Tabs divide content into mutually exclusive panels within the same region. They save space at the cost of making cross-panel comparison impossible and hiding the content behind the labels.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
When tabs are wrong
- When users need to compare content across panels.
- When content in a hidden panel needs attention, such as form errors.
- When there are more tabs than fit on one line, which produces scrolling tabs and poor discoverability.
- When the panels are sequential steps, which is a stepper.
- When printing matters, since hidden panels do not print.
The accessibility contract
- role tablist, tab and tabpanel, with aria-selected and aria-controls.
- Arrow keys move between tabs; Tab moves into the panel. Only the active tab is in the tab order.
- The panel is labelled by its tab.
- Reflect the selected tab in the URL so it can be shared and survives reload.
- If a hidden panel contains an error, mark the tab and say so.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
W3C, ARIA Authoring Practices Guide
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Serial Position EffectLaw
- Progressive DisclosurePrinciple
Often used with
These usually appear in the same screen or the same decision.
- Multi-Step FlowsPattern
- NavigationPattern
Alternative approach
A different answer to the same problem, with a different cost.
- AccordionComponent
Tabs show one of several. An accordion can show several at once, and stacks on narrow screens.