ComponentsSpec
Tabs
Peer views of one thing. A 2px ink underline marks the current tab; arrow keys move between them.
Visitors were asked for a phone number before they knew what it bought.
Show the product first; ask once the reader is convinced.
Conversion rose 3.2X on the same traffic.
Show code
<div class="tabs">
<div role="tablist" aria-label="Case views">
<button role="tab" id="t-1" aria-selected="true" aria-controls="p-1">Problem</button>
<button role="tab" id="t-2" aria-selected="false" aria-controls="p-2" tabindex="-1">Approach</button>
<button role="tab" id="t-3" aria-selected="false" aria-controls="p-3" tabindex="-1">Result</button>
</div>
<div role="tabpanel" id="p-1" aria-labelledby="t-1">Visitors were asked for a phone number before they knew what it bought.</div>
<div role="tabpanel" id="p-2" aria-labelledby="t-2" hidden>Show the product first; ask once the reader is convinced.</div>
<div role="tabpanel" id="p-3" aria-labelledby="t-3" hidden>Conversion rose 3.2X on the same traffic.</div>
</div>Roving tabindex: only the selected tab is in the tab order, ← → move and select. Content that the reader needs in sequence belongs on the page, not behind tabs.