Design Pattern

タブ

タブは、関連するコンテンツを複数パネルに分けて一度に 1 つだけ見せる UI パターンです。見た目だけでなく、WAI-ARIA ロールと矢印キー操作まで含めて実装する必要があります。

難易度: 中級カテゴリ: ナビゲーション

いつ使う / 使わない

使うべきとき

関連するコンテンツを同じページ内で切り替えて見せたい場合
表示領域が限られていて全内容を一度に見せづらい場合
パネル同士を同時比較する必要がない場合

使わないべきとき

順番に読むべき内容の場合 → ステップ UI やアコーディオンを検討する
タブ数が多すぎる場合
別ページへの移動が主目的の場合 → ナビゲーションリンクを使う

構造（Anatomy）

1 タブリスト（タブボタンのコンテナ）

2 タブ（各タブボタン。選択状態を管理）

3 タブパネル（選択中のタブに対応するコンテンツ）

タブリスト — role="tablist" を持つコンテナ
タブ — role="tab" と選択状態を持つ各ボタン
タブパネル — role="tabpanel" で対応するタブと関連付ける本文領域

HTML 構造

重要なポイント

コンテナに role="tablist"、各ボタンに role="tab" を付ける
アクティブなタブには aria-selected="true" を設定する
aria-controls と aria-labelledby でタブとパネルを関連付ける
ロービング tabindex により、フォーカス移動を 1 箇所に集約する

CSS 実装

状態別のスタイル設計

アクティブ状態は下線や背景、太字など複合的な手がかりで示す
:focus-visible でタブのフォーカスを視認できるようにする
パネル切り替え時のアニメーションは控えめにして、読みにくさを避ける
縦型タブではレイアウトと矢印キーの方向を合わせる

キーボード操作

Tab でタブリストへ移動し、次の Tab でパネルへ進む
← → で横型タブ間を移動
↑ ↓ で縦型タブ間を移動
Home / End で先頭・末尾へ移動

ライブデモ

基本タブ

WAI-ARIA ロールを備えた標準的な 3 タブ構成です。

アイコン付きタブ

ラベルにアイコンを加えたバリエーションです。

縦型タブ

縦方向レイアウトで情報量の多い画面にも適した例です。

よくある間違い

ARIA ロールを付与しない

見た目だけタブでも、支援技術には別の UI として認識されてしまいます。

矢印キー移動を実装しない

Tab だけで全タブを移動させると、キーボード操作が冗長になります。

非表示パネルを CSS だけで隠す

hidden 属性なども使わないと、支援技術が非表示内容を読み上げる場合があります。

ページ遷移のリンクをタブ化する

タブは同一ページ内の切り替え用であり、別ページへの移動とは役割が異なります。