アコーディオン（使い方）
コンポーネント要素
開閉アイコン（必須）
ヘッダー（必須）
ボディ（必須）
リターンリンク
サイズバリエーション
開閉アイコンのサイズはL・M・S・XSの4サイズがあります。画面サイズや、コンテンツの性質およびボリュームに基づいて使い分けてください。
リターンリンクの使い方
ヘッダーに戻って閉じる操作を必要とするときは、リターンリンクを使用できます。
配置
良い例
アコーディオン内にディスクロージャーを配置できます。
アコーディオンとディスクロージャーの組み合わせを行う際は、上記の例に則って使用してください。
悪い例
リスト内にアコーディオンを配置することはできません。
テーブル内にアコーディオンを配置することはできません。
アコーディオン内にアコーディオンを配置することはできません。
ディスクロージャー内にアコーディオンを配置することはできません。
アコーディオンは、それ自身がメイン情報であり、見出し・段落・リスト・テーブルなどのコンテンツと同レベルのセクションとして扱うコンポーネントです。そのため、上記のNG例にあたるような配置はできません。
コンテンツ
ヘッダーは概要文にする
よくある質問であれば「会員登録の手順は？」、更新履歴であれば「2025年11月5日 軽微な問題を修正しました」など、コンテンツを要約した概要文を記載します。
ボディ内にはさまざまなコンポーネントを配置できる
アコーディオンのボディには、情報を構成するために必要な様々なコンポーネントを配置することができます。
リターンリンクのラベルはヘッダーと揃える
リターンリンクのラベルは、たとえば「『会員登録の手順は？』の先頭に戻る」のような、ヘッダーに「の先頭に戻る」を加えるような形とし、ヘッダーと揃えてください。
ふるまい
ページ読み込み時に開いておくか閉じておくかを設定する
ページが読み込まれた際に、アコーディオンを開いた状態で表示するか、閉じた状態で表示するかを定めます。
例えば、先頭のアコーディオンコンポーネントを開いて表示しておくと、後続も同じように情報が折りたたまれていることを示唆できます。
リターンリンクはヘッダーへのページ内リンクとする
リターンリンクのリンク先はヘッダーへのページ内リンクとします。この挙動により、ボディを閉じるための補助として機能するようになります。
実装
details要素を使って実装する
アコーディオンを実装する際は、<details>要素を使用します。HTMLの<details>要素を使うと、アクセシブルなアコーディオンを容易に実現できます。<details>要素を使う場合、後述のキーボード操作とWAI-ARIAの実装は不要になります。
<details>
<summary>ヘッダー</summary>
<div>ボディ</div>
</details>
カスタムコンポーネントとして実装する場合
既存システムの制約等の理由でやむを得ず<details>要素を使用せずカスタムコンポーネントとして実装する場合は、キーボードだけを使ってアコーディオンを開閉操作できるようにしてください。また、WAI-ARIAのステートおよびプロパティを適切に付与し、支援技術からもUIの状態にアクセスできるようにしてください。
アコーディオンコンポーネントに求められるキーボード操作要件、WAI-ARIAステートおよびプロパティについては、ARIA Authoring Practices Guide（APG）を参照してください。