タブ

Tabs

別名: ナビゲーションタブ、タブ切り替え

生態(さわってみる)

タブは並列コンテンツの切り替えに使います。

一言定義

並列するコンテンツパネルを、見出しの切り替えで同じ領域に表示し分けるUI。

分類

使う場面

  • 同格のコンテンツを2〜6個程度で切り替えるとき
  • ページ遷移せずに文脈を保って見比べさせたいとき

避ける場面

  • 項目が多すぎて1行に収まらないとき(→ドロップダウンや一覧を検討)
  • 順序のある手順を進ませたいとき(→ステップバー)

近縁種との比較

セグメンテッドコントロールは見た目が似ているが、コンテンツの切り替えではなく 単一の設定値・状態を選ばせるための入力部品である点が異なる。アコーディオンは すべてのパネルを同じ縦方向に積んで開閉するため、複数パネルを同時に開いたまま比較でき、 省スペース性よりも一覧性を優先したいときに向く。タブは選択中の1パネルしか表示しないため、 横幅に余裕があり並列項目の切り替えに絞りたい場面に適する。

実例リンク

アクセシビリティ

role
role="tablist" / "tab" / "tabpanel"、選択中タブに aria-selected="true"
キーボード操作
矢印キーでタブ間移動、Tabキーでパネルへ