Tab Interface Pattern

The Structure

Tabs are complex because they simulate a desktop application interface.

<div class="tabs">
  <div role="tablist" aria-label="Entertainment">
    <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
      Nils Frahm
    </button>
    <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
      Agnes Obel
    </button>
  </div>
  
  <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
    <p>Nils Frahm is a German musician...</p>
  </div>
  <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
    <p>Agnes Obel is a Danish singer...</p>
  </div>
</div>

Keyboard Behavior

• Left/Right Arrows: Move focus between tabs (Roving tabindex).
• Enter/Space: Activate tab.
• Tab: Move into the active panel.