タブコンポーネント（アクセシブル）

解説

このスニペットは、クリックで表示内容を切り替えるタブ UI を、アクセシビリティに配慮して実装したものです。タブ群には role="tablist"、各ボタンには role="tab" と aria-selected、中身には role="tabpanel" と aria-labelledby を付け、支援技術にも構造が正しく伝わります。JavaScript はボタンのクリックで全タブの is-active と aria-selected をいったん解除し、押されたタブと aria-controls で結ばれたパネルだけを表示状態にします。パネルの出し分けは CSS の display で行われます。

使う場面

• 概要・機能・料金のように情報をグループ分けして見せる紹介ページ
• 商品詳細の説明・仕様・レビューの切り替え
• 設定画面でカテゴリごとに項目をまとめる用途

見た目はアクティブタブの下線色や文字色を CSS で変えるだけで調整できます。closest でタブ群を特定しているため、同じページに複数のタブを置いても干渉しません。注意点として、より厳密なアクセシビリティを目指すなら、左右の矢印キーでタブを移動できるキーボード操作や tabindex の管理を追加すると、マウスを使わない利用者にも親切です。パネルが多い場合は初期表示を一つだけにし、残りは確実に隠れていることを確認してください。