Design Pattern

Tabs

Tabs are a UI pattern that splits related content into multiple panels and shows only one at a time. Beyond appearance, you must implement them with proper WAI-ARIA roles and arrow-key navigation.

Difficulty: Intermediate Category: Navigation

When to use / not use

Use it when

  • When you want to switch between related content within the same page
  • When display space is limited and showing everything at once is hard
  • When the panels don't need to be compared side by side

Don't use it when

  • When the content should be read in order → consider a step UI or accordion
  • When there are too many tabs
  • When the goal is navigating to other pages → use navigation links

Anatomy

1 Tab list (container of tab buttons)
2 Tab (each tab button, managing selection state)
3 Tab panel (content corresponding to the selected tab)
  1. Tab list — A container with role="tablist"
  2. Tab — Each button with role="tab" and selection state
  3. Tab panel — A body region associated with its tab via role="tabpanel"

HTML Structure

Key points

  • Set role="tablist" on the container and role="tab" on each button
  • Set aria-selected="true" on the active tab
  • Associate tabs with panels using aria-controls and aria-labelledby
  • Use roving tabindex to keep focus movement within a single stop

CSS Implementation

Styling for each state

  • Indicate the active state with multiple cues: underline, background, or bold
  • Make tab focus visible with :focus-visible
  • Keep panel-switch animation subtle to avoid hurting readability
  • For vertical tabs, align the layout with the arrow-key direction

Accessibility

WCAG 4.1.2 Name, Role, Value

tablist / tab / tabpanel and the selection state must be conveyed correctly.

WCAG 1.3.1 Info and Relationships

Associate tabs and panels programmatically via ARIA attributes.

WCAG 2.1.1 Keyboard

Including arrow-key movement, tabs must follow standard keyboard conventions.

Keyboard operation

  • Use Tab to enter the tab list, then Tab again to move to the panel
  • Use ← → to move between horizontal tabs
  • Use ↑ ↓ to move between vertical tabs
  • Use Home / End to jump to the first/last tab

Live Demo

Basic tabs

A standard three-tab layout with WAI-ARIA roles.

PreviewFullscreen

Tabs with icons

A variation with icons added to the labels.

PreviewFullscreen

Vertical tabs

A vertical layout example suitable for information-dense screens.

PreviewFullscreen

Common mistakes

Not providing ARIA roles

Even if they look like tabs, assistive technology will perceive them as something else.

Not implementing arrow-key movement

If users must Tab through every tab, keyboard operation becomes tedious.

Hiding inactive panels with CSS alone

Without the hidden attribute, assistive technology may still announce hidden content.

Turning page navigation into tabs

Tabs are for switching within the same page; that's a different role from navigating between pages.