ARIA タブ（roving tabindex）
Tab でタブ列に入り、← → Home End で移動。選択中のタブだけ tabindex=0（roving tabindex）、aria-selected と aria-controls で読み上げが「料金, タブ, 2/4, 選択」になる。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- タブ列は Tab で1回で通り抜けられるように、選択中のタブだけ tabindex=0・他は -1 にする（roving tabindex）
- ← → で移動したら同時に選択も切り替える（自動アクティベーション）。パネルの読み込みが重いときだけ Enter 待ちにする
- aria-controls と aria-labelledby で双方向に結ぶ。読み上げが「2/4」と位置を言えるのは role=tablist の中に role=tab があるから
- パネルに tabindex=0 を付ける。中に操作要素が無いパネルは、Tab で飛ばされて読めなくなる
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="atb-wrap">
<div class="atb-tablist" role="tablist" aria-label="プランの詳細" id="atb-tablist">
<button type="button" role="tab" id="atb-t1" aria-selected="true" aria-controls="atb-p1" tabindex="0">概要</button>
<button type="button" role="tab" id="atb-t2" aria-selected="false" aria-controls="atb-p2" tabindex="-1">料金</button>
<button type="button" role="tab" id="atb-t3" aria-selected="false" aria-controls="atb-p3" tabindex="-1">導入手順</button>
<button type="button" role="tab" id="atb-t4" aria-selected="false" aria-controls="atb-p4" tabindex="-1">FAQ</button>
</div>
<div class="atb-panel" role="tabpanel" id="atb-p1" aria-labelledby="atb-t1" tabindex="0">
<p>見積もり・請求・入金消込を1つの画面で。会計ソフトへは仕訳データとして連携します。</p>
</div>
<div class="atb-panel" role="tabpanel" id="atb-p2" aria-labelledby="atb-t2" tabindex="0" hidden>
<p><strong>¥1,980/月</strong>（1ユーザー・年払い）。請求書の発行枚数に上限はありません。</p>
</div>
<div class="atb-panel" role="tabpanel" id="atb-p3" aria-labelledby="atb-t3" tabindex="0" hidden>
<p>①取引先の CSV を取り込む → ②請求テンプレートを1つ作る → ③初回の請求書を送る。最短で当日に使い始められます。</p>
</div>
<div class="atb-panel" role="tabpanel" id="atb-p4" aria-labelledby="atb-t4" tabindex="0" hidden>
<p>途中解約は可能ですか — はい。月末までの利用分だけ請求され、データは 90 日間保持されます。</p>
</div>
<div class="atb-band">
<span class="atb-tag">読み上げ</span><span id="atb-sr">概要, タブ, 1/4, 選択</span>
<span class="atb-keys" aria-hidden="true"><kbd>←</kbd><kbd>→</kbd><kbd>Home</kbd><kbd>End</kbd></span>
</div>
</div>