002_details-basic
<details> / <summary> を使ったブラウザネイティブのアコーディオン実装です。
JavaScript なしで開閉・キーボード操作・フォーカス移動が動作します。
複数項目を同時に開けるベース実装です。
<details> 要素とは何か？
<details> は HTML5 で標準化された折りたたみ要素です。
最初の子要素として <summary> を置き、それ以降の子要素が開閉される本文になります。
ブラウザが開閉トグルをネイティブで処理するため、JavaScript を1行も書かずにアコーディオン UI を構築できます。
open 属性の使い方は？
<details open> のように open 属性を付けると、初期状態で本文が開いた状態になります。
属性を外せば閉じた状態が初期表示です。
ユーザーが開閉操作するたびにブラウザが open 属性を自動で付け外しするため、
CSS では details[open] セレクタで「開いている状態」のスタイルを書けます。
JS 不要実装の利点と限界は？
利点: JS を読み込まずに動作するため軽量で、JS が落ちた場合も問題なく機能します。 キーボード操作・スクリーンリーダー対応もブラウザが標準で処理してくれます。
限界: 高さアニメーションは標準ではサポートされず、 「1つだけ開く（排他制御）」のような独自挙動には JS が必要になります。 シンプルな開閉で十分な場面に向いています。
アクセシビリティはどう担保される？
<summary> はネイティブにフォーカス可能な要素として扱われ、
Tab キーでフォーカス移動・Enter / Space キーで開閉という挙動をブラウザが処理します。
そのため tabindex や aria-expanded を自前で付与する必要はありません。
スクリーンリーダーには「展開可能/折りたたみ可能」という状態が標準で伝わります。
シンプルな実装で WAI-ARIA 相当の支援技術対応が得られるのが <details> の最大の強みです。