タブ

タブ（Tabs）とは？

タブは、同じ場所に複数の「パネル（内容のかたまり）」を重ねて置き、 上部の見出し（タブ）を選ぶことで表示するパネルを切り替える UI です。 設定画面、商品詳細、ダッシュボードなど「関連する情報をスペースを節約して並べたい」場面でよく使われます。

見た目は「ボタンが並んでいるだけ」ですが、支援技術には「これはタブの集まりで、いまどれが選ばれているか」を正しく伝える必要があります。

なぜアクセシビリティが大事なの？

• キーボードだけで操作する人。タブが <div> だとTab でフォーカスできず切り替えられません。また、タブ全体が1つのグループとして まとまっていないと、タブの数だけ Tab を押す羽目になり煩雑です。
• スクリーンリーダーを使う人。role="tab" やaria-selected がないと「タブである」ことも「いまどれが選択中か」も伝わらず、 ただのリンクやテキストの羅列に聞こえてしまいます。

ポイントは 「タブ全体で1タブストップ（roving tabindex）」 と「aria-selected で選択状態を伝える」の2つです。

ライブデモ（推奨実装）

下のタブは APG に沿った実装です。マウスを使わずキーボードで操作してみてください。

キーボード操作

必要な WAI-ARIA / ロール

実装：推奨パターン（Good）

マークアップ:

<div class="tabs">
  <div role="tablist" aria-label="アカウント設定">
    <button type="button"
            role="tab"
            id="tabs-tab-profile"
            aria-selected="true"
            aria-controls="tabs-panel-profile"
            tabindex="0">プロフィール</button>
    <button type="button"
            role="tab"
            id="tabs-tab-security"
            aria-selected="false"
            aria-controls="tabs-panel-security"
            tabindex="-1">セキュリティ</button>
  </div>

  <div role="tabpanel"
       id="tabs-panel-profile"
       aria-labelledby="tabs-tab-profile"
       tabindex="0">プロフィールの内容…</div>
  <div role="tabpanel"
       id="tabs-panel-security"
       aria-labelledby="tabs-tab-security"
       tabindex="0"
       hidden>セキュリティの内容…</div>
</div>

切替のスクリプト（aria-selected・tabindex・hidden を1か所で同期）:

document.querySelectorAll('[data-tabs]').forEach((root) => {
  const tabs = Array.from(root.querySelectorAll('[role="tab"]'));

  function select(tab) {
    tabs.forEach((t) => {
      const selected = t === tab;
      // aria-selected と roving tabindex を同期させる
      t.setAttribute('aria-selected', String(selected));
      t.tabIndex = selected ? 0 : -1; // 選択タブだけ Tab で入れる
      const panel = document.getElementById(t.getAttribute('aria-controls'));
      if (panel) panel.hidden = !selected;
    });
  }

  tabs.forEach((tab, i) => {
    tab.addEventListener('click', () => select(tab));
    tab.addEventListener('keydown', (e) => {
      let next = null;
      if (e.key === 'ArrowRight') next = (i + 1) % tabs.length;
      else if (e.key === 'ArrowLeft') next = (i - 1 + tabs.length) % tabs.length;
      else if (e.key === 'Home') next = 0;
      else if (e.key === 'End') next = tabs.length - 1;
      if (next !== null) {
        e.preventDefault();
        tabs[next].focus(); // フォーカス移動
        select(tabs[next]); // 同時にそのタブを選択（自動アクティベーション）
      }
    });
  });
});

アンチパターン（Bad）

下は <div> と onclick だけで作ったタブです。マウスでは切り替わりますが、キーボードでは一切操作できません。

<!-- ❌ アンチパターン -->
<div class="tabs">
  <div class="tablist">
    <!-- div + onclick。role も aria-selected もキーボードもない -->
    <div class="tab" onclick="show('p1')">プロフィール</div>
    <div class="tab" onclick="show('p2')">セキュリティ</div>
  </div>
  <div id="p1">プロフィールの内容…</div>
  <div id="p2" style="display:none">セキュリティの内容…</div>
</div>

実装チェックリスト

• タブを role="tablist" + aria-label で囲んでいる
• 各タブは <button role="tab"> である
• aria-selected が選択状態と常に一致している
• 選択タブだけ tabindex="0"、他は -1（roving tabindex でタブ全体が1タブストップ）
• ←→ でタブ移動、Home/End で端へ移動できる
• 各タブ aria-controls、各パネル role="tabpanel" + aria-labelledby + tabindex="0"
• 非表示パネルは hidden で読み上げ/操作から外れている
• フォーカスが見える（フォーカスリングを消していない）

原文（英語）:Tabs Pattern — W3C APG（新しいタブで開きます）