Skip to main content

Tab Components

Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.

Must haves

  1. Use ARIA tablist and associated roles and properties to communicate the tab functionality and state information.
  2. Implement the correct keyboard behavior for tabs (arrowing between tab elements, not tabbing between them)
  3. Tip: try to limit the number of tab items to below 6 so that all tabs can display in a single row on desktop (similar to horizontal navigation)

Learn more about the accessible tabs pattern

Visual Example

Tip: the tabs don’t need to look like they are paper manila folder tabs, they can be visually more subtle and still convey the same interaction to end users.

Tab components visual example

Do and Don't

DoDon't

<div role="tablist">
   <button id="tab-1" role="tab" aria-selected="true" aria-controls="tabpanel-1">Current Invoices</button>
   <button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1">Past Invoices</button>
</div>

<div role="tabpanel" aria-labelledby="tab-1">
…(tab panel content)
</div>

<div role="tabpanel" aria-labelledby="tab-2">
…(tab panel content)
</div>

<div class="tabs">
   <a href="#">Current Invoices</a>
   <a href="#">Past Invoices</button>
</div>

<div>
…(tab panel content)
</div>

<div>
…(tab panel content)
</div>

Here there is no markup to indicate the tab and tabpanel roles and the state of which tab is selected/currently shown. The keyboard interaction will not match the expectation for tabs.

Last modified