注意：おそらくここで述べているUIはディスクロージャーという名前がより正確なものになります。アコーディオンは複数のディスクロージャーを束ねたUIとして呼ばれることがある様子。

その他にコラプスなど複数の呼び名で呼ばれていますが、本稿では

何かしらのクリック・フォーカス要素をトリガーしその真下に浮遊せずにページないに埋め込まれている開閉する要素がセットになっているものをアコーディオンと呼びます。

基本要件

hidden=”until-found” にしておきましょう

Safariでは2024_10現在通常のhidden属性として扱われますが、Chrome,Edgeでは有効です。until-foundとすることで、アコーディオンが閉じている状態でもページ内検索でアコーディオンパネル内のワードが表示されます。

キーボード操作できるようにしましょう

<button/> または<details/><summary/> をトリガーに使用します。

開閉状態をブラウザが理解できるようにします

ネイティブなHTML要素を使用するかaria-expanded,aria-controls を付与し状態に合わせて値を切り替えます。

マークアップとして

<details>
	<summary>UI論について</summary>
	詳細テキスト....
</details>

良いところ