タブコンポーネント
クリックで切り替わる標準タブ UI。aria-selected 等のアクセシビリティ属性付き。サービス紹介・料金プラン・FAQ カテゴリ切替に。
解説
クリックでパネルを切り替えるタブ UIです。タブ群には role="tablist"、各ボタンには role="tab" と aria-selected を付け、パネルは hidden 属性で表示・非表示を管理します。JavaScript は、押されたタブの data-tab と一致する data-panel だけを表示し、他のタブの aria-selected を false に戻すシンプルな処理です。選択中のタブには下線が ::after で表示され、現在地が一目で分かります。
使う場面
- サービスの「概要・特徴・料金」など情報のグループ分け
- 商品ページの「説明・仕様・レビュー」の切替
- 設定画面のカテゴリ別パネル
タブを増やすときは、ボタンと対応するパネルをセットで追加し、data-tab と data-panel の番号を一致させます。aria-selected と hidden を使っているためスクリーンリーダーにも状態が伝わりますが、より完成度を高めるなら矢印キーでのタブ移動や tabindex 制御を加えると、キーボード操作がさらに快適になります。下線の色やパネルの余白は CSS で自由に調整できます。
使用例・適したシーン
- サービス紹介の切替表示
- 料金プラン比較
- FAQ カテゴリ切替
よくある質問
タブを増やすにはどうすればいいですか？
tabs__list にボタンを1つ、その下に対応する tabs__panel を1つ追加します。新しいボタンの data-tab とパネルの data-panel に同じ番号を割り当てれば、JavaScript を変更せずに切替が動きます。
アクセシビリティはどこまで対応していますか？
role=tablist / role=tab / aria-selected と hidden 属性で、選択状態と表示状態を支援技術に伝えています。さらに快適にするなら、矢印キーでタブを移動できるキーボード操作を追加するとよりアクセシブルになります。