Tabs
The tabs component organizes related content into separate panels that users can switch between, with responsive behavior that adapts to mobile devices. Use tabs to present multiple views of related information without overwhelming users with too much content at once. The component automatically switches to a dropdown selection interface on mobile devices for better touch interaction and space efficiency.
Do
- Group related content logically into tabs that share a common theme or purpose for intuitive navigation.
- Use clear, descriptive tab labels that accurately describe the content users will find in each panel.
- Limit the number of tabs to 3–6 items to avoid overwhelming users and maintain usability across devices.
- Ensure content independence so each tab panel can be understood without requiring information from other tabs.
- Test mobile experience to verify the dropdown interface works smoothly on touch devices.
- Include proper ARIA attributes for screen reader accessibility and keyboard navigation support.
- Use consistent content structure across all tab panels to maintain a predictable experience.
- Consider content length to ensure tab panels don’t create jarring layout shifts when switching.
Don’t
- Don’t use tabs for sequential processes — step-by-step workflows are better served by other navigation patterns.
- Don’t make tab labels too long — keep labels concise while remaining descriptive and scannable.
- Don’t nest tabs within tabs — avoid complex hierarchies that can confuse navigation and accessibility.
- Don’t use tabs for unrelated content — each tab should be part of a cohesive information set.
- Don’t ignore mobile constraints — test how tab labels and content work within the dropdown interface.
- Don’t forget keyboard navigation — ensure all tabs are accessible via Tab and arrow key navigation.
- Don’t use too many tabs — consider alternative organization methods when you have more than 6–7 tabs.
- Don’t rely solely on visual cues for active states — include proper ARIA attributes for accessibility.
Responsive Tabs
Adaptive tabs interface that displays as traditional tabs on desktop and switches to a dropdown selector on mobile. Demonstrates time-period data filtering with consistent content structure across all panels. Use this pattern for data dashboards, report filtering, or any content where users need to switch between related views.
Past Day
The following table summarizes the number of cases opened and closed by each case manager in the past day.
| Case manager | Cases opened | Cases closed |
|---|---|---|
| Alice Smith | 3 | 0 |
| Bob Johnson | 1 | 0 |
| Carol Lee | 2 | 1 |
Past Week
The following table summarizes the number of cases opened and closed by each case manager in the past week.
| Case manager | Cases opened | Cases closed |
|---|---|---|
| Alice Smith | 26 | 14 |
| Bob Johnson | 14 | 18 |
| Carol Lee | 27 | 23 |
Past Month
The following table summarizes the number of cases opened and closed by each case manager in the past month.
| Case manager | Cases opened | Cases closed |
|---|---|---|
| Alice Smith | 102 | 98 |
| Bob Johnson | 132 | 125 |
| Carol Lee | 112 | 135 |
Past Year
The following table summarizes the number of cases opened and closed by each case manager in the past year.
| Case manager | Cases opened | Cases closed |
|---|---|---|
| Alice Smith | 1367 | 1478 |
| Bob Johnson | 1124 | 1079 |
| Carol Lee | 1542 | 1261 |
Past Day
The following table summarizes the number of cases opened and closed by each case manager in the past day.
| Case manager | Cases opened | Cases closed |
|---|---|---|
| Alice Smith | 3 | 0 |
| Bob Johnson | 1 | 0 |
| Carol Lee | 2 | 1 |
Past Week
The following table summarizes the number of cases opened and closed by each case manager in the past week.
| Case manager | Cases opened | Cases closed |
|---|---|---|
| Alice Smith | 26 | 14 |
| Bob Johnson | 14 | 18 |
| Carol Lee | 27 | 23 |
Past Month
The following table summarizes the number of cases opened and closed by each case manager in the past month.
| Case manager | Cases opened | Cases closed |
|---|---|---|
| Alice Smith | 102 | 98 |
| Bob Johnson | 132 | 125 |
| Carol Lee | 112 | 135 |
Past Year
The following table summarizes the number of cases opened and closed by each case manager in the past year.
| Case manager | Cases opened | Cases closed |
|---|---|---|
| Alice Smith | 1367 | 1478 |
| Bob Johnson | 1124 | 1079 |
| Carol Lee | 1542 | 1261 |
Accessibility Best Practices
Screen Reader Support
- Proper tab roles: Uses
role="tabpanel"for content areas and proper ARIA relationships between tabs and panels. - Descriptive tab labels: Each tab has clear, specific labels that describe the content without ambiguity.
- Active state announcements: Current tab selection is properly announced with
aria-selectedattributes. - Mobile dropdown accessibility: Mobile interface uses
role="listbox"androle="option"for proper dropdown semantics.
Keyboard Navigation
- Arrow key navigation: Users can navigate between tabs using left/right arrow keys on desktop interface.
- Tab key behavior: Tab key moves focus between the tab list and tab content areas.
- Enter/Space activation: Users can activate tabs using Enter or Space keys when focused.
- Mobile dropdown access: Mobile dropdown is fully keyboard accessible with proper focus management.
Visual Accessibility
- High contrast ratios: All tab labels, active states, and content meet WCAG AA contrast requirements.
- Clear active indicators: Selected tabs use multiple visual cues beyond color to indicate current state.
- Focus indicators: Clear visual focus states help keyboard users identify their current position.
- Responsive design: Tab interface maintains usability and accessibility across all screen sizes.
Content Guidelines
- Parallel tab labels: Use similar grammatical structure across all tab labels for consistency.
- Specific descriptions: Write tab labels that clearly differentiate between different content views.
- Consistent content format: Maintain similar content structure and depth across all tab panels.
- Logical ordering: Arrange tabs in order of importance, frequency of use, or logical progression.
Implementation Considerations
- JavaScript dependency: Tabs require JavaScript for switching functionality and mobile responsive behavior.
- Content loading: Consider lazy loading tab content that isn’t immediately visible to improve performance.
- State persistence: Decide whether tab selection should persist across page reloads or reset to default.
- Mobile optimization: Test dropdown interface thoroughly on various mobile devices and screen sizes.
ARIA Attributes in Use
role="tabpanel"— Identifies content areas as tab panels for screen reader navigation.aria-labelledby— Connects tab panels to their corresponding tab labels.aria-selected="true/false"— Indicates which tab is currently active.aria-expanded="false"— Shows dropdown state in mobile interface.aria-live="polite"— Announces tab selection changes to screen readers.