001_js-toggle

アコーディオンUIとは、見出し（ヘッダー）をクリックすると本文（パネル）が折りたたみ式で開閉するUIパターンです。 限られた画面領域に多くの情報を整理して配置できるため、FAQ・サイドメニュー・スマートフォン向けナビゲーション等で広く使われています。

<button> はクリックイベントだけでなく Enter / Space キーでの操作・タブキーでのフォーカス移動・スクリーンリーダーへのボタン通知をブラウザがネイティブに処理してくれるためです。

<div> に role="button" を付与する方法もありますが、キーボード操作・フォーカス制御・支援技術対応をすべて自前で再現する必要があり、抜け漏れが起きやすくなります。

aria-expanded はボタンが制御する領域が「現在開いているか閉じているか」をスクリーンリーダーに伝える属性です。 true / false をJSで切り替えます。

aria-controls はボタンがどの要素を制御しているかを id で関連付ける属性です。 本文側の id と一致させることで、支援技術がボタンとパネルの関係を認識できます。

このスニペット（001 js-toggle）は 複数同時に開けるベース実装 です。 各項目は他の項目の状態に影響されず、それぞれ独立して開閉します。

「1つだけ開いて他は閉じる」排他制御や「複数同時に開ける」明示的なパターンは、それぞれ別スニペットとして用意しています。