Tabs

A WAI-ARIA tabs widget with roving tabindex and arrow-key navigation.

Tabs

  • Overview

    With JavaScript off, each tab is just a heading-led section stacked down the page — a perfectly readable document. JavaScript upgrades this into an ARIA tabs widget.

  • Keyboard

    Once upgraded, arrow keys move between tabs with automatic activation, and Home / End jump to the first and last tab. Focus then moves into the active panel.

  • Markup

    Authors write semantic <section> elements with headings; the script generates the role="tablist" buttons and wires the ARIA relationships.

Using the tabs accessibly

Reach for tabs to let people switch between sibling views of related content within a single context, without leaving the page.

Do

  • Follow the WAI-ARIA APG: a role="tablist" of role="tab" controls, each owning a role="tabpanel".
  • Use arrow keys plus Home and End to move between tabs, with aria-selected tracking the active one.
  • Keep every panel readable when JavaScript is off — as stacked, heading-led sections.

Don't

  • Don't use tabs for sequential steps such as a wizard or checkout flow.
  • Don't use tabs as primary site navigation — use real links and landmarks instead.
  • Don't leave every tab in the tab order; only the active tab should be reachable with Tab.

Build it right

  • Apply a roving tabindex: the active tab is 0, the rest are -1.
  • Update aria-selected="true" on the active tab and false on the others.
  • Point each panel's aria-labelledby at the id of its controlling tab.
  • Let arrow keys cycle through tabs and Home / End jump to the first and last.
  • Move focus into the active panel so keyboard users land on the revealed content.

The source CSS for this component lives in assets/css/components/tabs.css.