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.
On this plate
Reach for this when
- Parallel content of similar importance.
- Space is constrained and comparison is not needed.
Common mistakes
- Errors hidden inside inactive panels.
- Too many tabs to fit.
- Tab state absent from the URL.
- Tabs used for sequential steps.
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.
Tabs, and what they promise
Do
- Use them for parallel views of one subject, where only one is needed at a time.
- Keep the selected tab in the URL, so the view can be shared and restored.
- Implement the keyboard contract: arrows move between tabs, Tab moves into the panel.
- Keep labels short enough to sit on one row at the narrowest supported width.
Do not
- Use tabs for sequential steps. That is a wizard.
- Put content the reader must compare across two tabs.
- Hide a required form field in an unselected tab, then fail validation on submit.
- Scroll tabs horizontally with no indication that more exist.
In practice
- i.
The validation error in tab three
Hidden required fieldsA form split across tabs rejected the submission for a field the reader could not see. Tabs must surface which panel holds the problem, and move focus to it, or they turn a small error into a hunt.
- ii.
Comparison across tabs
When tabs are the wrong shapePricing details split across three tabs made comparison impossible, since only one could be seen at a time. That content wanted a table, which is the shape of the question the reader had.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Accordion
ComponentStacked headings that expand in place, several at once if you allow it.
Key difference
Tabs show exactly one panel at a time in a fixed region. An accordion can hold several sections open at once and grows the page as it does. Tabs promise parallel alternatives; an accordion promises a long document you can collapse.
Use Tabs when
- The panels are genuine alternatives, viewed one at a time.
- There are few enough labels to sit on one row on a phone.
- Nothing inside one panel needs comparing with another.
Use Accordion when
- The sections are parts of one long document, not alternatives.
- Readers want two sections open side by side.
- The list is long or the labels are too wordy for a tab row.
Local chart
CMP·016 · Region III · Grid F2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
- [1]
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·008 · Law
- Progressive DisclosurePRIN·003 · Principle
Depends on
Get these right first, or this one will not hold.
- Keyboard NavigationA11Y·002 · Accessibility
Often used with
These usually appear in the same screen or the same decision.
- Multi-Step FlowsPAT·016 · Pattern
- NavigationPAT·001 · Pattern