Tabs

Tabbed interface using ARIA roles and attributes.

Basic Tabs

Use role="tablist", role="tab", and aria-selected for styling:

Content for Tab 1

<div role="tablist" aria-label="Sample tabs">
  <button role="tab" aria-selected="true">Tab 1</button>
  <button role="tab" aria-selected="false">Tab 2</button>
  <button role="tab" aria-selected="false">Tab 3</button>
</div>

<div role="tabpanel">
  <p>Content for Tab 1</p>
</div>

Full Implementation

A complete accessible tabs implementation:

<div role="tablist" aria-label="Settings">
  <button
    role="tab"
    aria-selected="true"
    aria-controls="panel-1"
    id="tab-1"
  >
    General
  </button>
  <button
    role="tab"
    aria-selected="false"
    aria-controls="panel-2"
    id="tab-2"
    tabindex="-1"
  >
    Privacy
  </button>
</div>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  <p>General settings content.</p>
</div>

<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
  <p>Privacy settings content.</p>
</div>

Accessibility Notes

  • Use aria-selected="true" on the active tab
  • Use tabindex="-1" on inactive tabs to prevent focus
  • Connect tabs to panels with aria-controls and aria-labelledby
  • Hide inactive panels with the hidden attribute