003_css-only

<input type="checkbox"> の :checked 状態を兄弟セレクタ（~ や +）で参照し、 別の要素のスタイルを切り替えるテクニックです。 <label> をチェックボックスに for 属性で関連付ければ、ラベルのクリックでチェック状態が反転するため、 これを開閉トリガーとして使えます。

JavaScript を読み込まずにアコーディオンの開閉が成立するため、JS が無効化された環境や JS の読み込みに失敗した状況でも動作します。

実体は <input type="checkbox"> なので、スクリーンリーダーには「チェックボックス」として読み上げられます。 「展開可能なボタン」とは伝わらない点が、本来のアコーディオン UI からの逸脱です。

また、チェックボックス本体を display: none で隠すと Tab フォーカスも失われて操作不能になります。 本スニペットでは position: absolute + clip による sr-only パターンで視覚的にだけ隠し、フォーカス可能性を維持しています。

<details> はブラウザに「折りたたみ要素」として認識され、支援技術にも展開状態が標準で伝わります。 JS なしで開閉したい場合の第一選択は <details> です。

チェックボックスハックは、<details> 標準のマーカー / 開閉アニメーション制限を超えて 「自由なスタイリング・兄弟要素との組み合わせ」を行いたい時の代替手段として位置づけるのが穏当です。 代償としてセマンティクスが弱くなる点は把握しておく必要があります。

各項目が独立した <input type="checkbox"> を持つため、複数同時に開ける挙動になります。 チェックボックスは互いに状態を干渉せず、それぞれ個別に ON/OFF できるためです。

「1つだけ開いて他は閉じる」排他制御を CSS のみで実装したい場合は、 チェックボックスではなく <input type="radio"> を同一 name でグルーピングする方法があります。 ただし「同じラジオを再クリックしても閉じない」など挙動上のクセがあるため、別スニペットで扱います。