0Pricing
HTML Academy · Lesson

aria-selected and Tab Patterns

Implement keyboard-accessible tab interfaces.

Tab Pattern Overview

A tab interface has three ARIA components:

  • role="tablist" — container for all tabs
  • role="tab" — individual tab button
  • role="tabpanel" — the content panel for each tab

ARIA Tab Structure

Complete accessible tab markup:

<div role="tablist" aria-label="Account Settings">
  <button role="tab" id="tab-1" aria-selected="true"
          aria-controls="panel-1">Profile</button>
  <button role="tab" id="tab-2" aria-selected="false"
          aria-controls="panel-2" tabindex="-1">Security</button>
  <button role="tab" id="tab-3" aria-selected="false"
          aria-controls="panel-3" tabindex="-1">Notifications</button>
</div>

<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Profile content...
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Security content...
</div>

All lessons in this course

  1. aria-expanded aria-controls for Toggles
  2. aria-selected and Tab Patterns
  3. Live Regions aria-live aria-atomic aria-relevant
  4. Testing with Screen Readers
← Back to HTML Academy