← All patterns · Navigation widgets

Tabs

A set of tabs each revealing one of a series of panels.

Pattern

A tabs widget groups several panels of content under a row of tabs; activating a tab reveals its panel and hides the others. The active tab carries the user's location; the tab list and the tab panels are linked by aria-controls and aria-labelledby.

Roles

  • tablist
  • tab
  • tabpanel

States and properties

aria-selected
On each tab; true on the active one.
aria-controls
On each tab, pointing at its panel.
aria-labelledby
On each panel, pointing at its tab.
tabindex
Active tab is 0; others are -1 (roving tabindex).

Keyboard interaction

Left / Right arrow
Move focus between tabs in a horizontal tablist.
Up / Down arrow
Move focus between tabs in a vertical tablist.
Home / End
Move focus to first / last tab.
Enter or Space
Activate the focused tab.

WCAG criteria

  • 2.1.1 — Keyboard
  • 4.1.2 — Name, Role, Value

Canonical reference

WAI-ARIA Authoring Practices Guide — Tabs

More