タブ
Tabs
別名: ナビゲーションタブ、タブ切り替え
生態(さわってみる)
タブは並列コンテンツの切り替えに使います。
選択中タブに aria-selected=true。
矢印キーでもタブ間を移動できます。
一言定義
並列するコンテンツパネルを、見出しの切り替えで同じ領域に表示し分けるUI。
分類
使う場面
- 同格のコンテンツを2〜6個程度で切り替えるとき
- ページ遷移せずに文脈を保って見比べさせたいとき
避ける場面
- 項目が多すぎて1行に収まらないとき(→ドロップダウンや一覧を検討)
- 順序のある手順を進ませたいとき(→ステップバー)
近縁種との比較
セグメンテッドコントロールは見た目が似ているが、コンテンツの切り替えではなく 単一の設定値・状態を選ばせるための入力部品である点が異なる。アコーディオンは すべてのパネルを同じ縦方向に積んで開閉するため、複数パネルを同時に開いたまま比較でき、 省スペース性よりも一覧性を優先したいときに向く。タブは選択中の1パネルしか表示しないため、 横幅に余裕があり並列項目の切り替えに絞りたい場面に適する。
実例リンク
アクセシビリティ
- role
- role="tablist" / "tab" / "tabpanel"、選択中タブに aria-selected="true"
- キーボード操作
- 矢印キーでタブ間移動、Tabキーでパネルへ