ディスクロージャー（使い方）
コンポーネント要素
開閉アイコン（必須）
タイトル（必須）
コンテンツ（必須）
リターンリンク
リターンリンクの使い方
以下の状況ではリターンリンクを使用することができます。
- 後続する要素との混同を防ぐために、コンテンツ終端を明示する必要があるとき
- コンテンツが長く、文脈を見失う可能性があるとき
- タイトルに戻って閉じる操作を必要とするとき
配置
良い例
ディスクロージャーは入れ子にできます。
アコーディオン内にディスクロージャーを配置できます。
ディスクロージャーの入れ子や、アコーディオンとの組み合わせを行う際は、上記の例に則って使用してください。
悪い例
ディスクロージャー内にアコーディオンを配置することはできません。
アコーディオンは、それ自身がメイン情報であり、見出し・段落・リスト・テーブルなどのコンテンツと同レベルのセクションとして扱うコンポーネントです。そのため、ディスクロージャー内にアコーディオンを配置することはできません。
コンテンツ
タイトルは簡潔で説明的にする
「補足説明」「設定オプション」など、コンテンツを要約した簡潔で説明的なラベルを記載します。
タイトルでアクションを示唆することは避ける
「詳細を見る」や「もっと見る」などのラベルは、コンポーネントの動作を説明しているだけであり、コンテンツの内容が予測しづらいため避けます。
開閉状態にかかわらずタイトルは一定にする
例えば、折りたたみ時に「ピックアップを開く」、展開時に「ピックアップを閉じる」といったラベルにすることは避けます。状態に応じてテキストを変更することは避け、「ピックアップ一覧」のように一定のラベルにします。
リターンリンクのラベルはタイトルと揃える
リターンリンクのラベルは、たとえば「『ピックアップ』の先頭に戻る」のような、タイトルに「の先頭に戻る」を加えるような形とし、タイトルと揃えてください。
ふるまい
リターンリンクはタイトルへのページ内リンクとする
リターンリンクのリンク先はタイトルへのページ内リンクとします。この挙動により、コンテンツを閉じるための補助として機能するようになります。
実装
<details>要素を使って実装する
ディスクロージャーを実装する際は、<details>要素を使用します。HTMLの<details>要素を使うと、アクセシブルなディスクロージャーを容易に実現できます。<details>要素を使う場合、後述のキーボード操作とWAI-ARIAの実装は不要になります。
<details>
<summary>タイトル</summary>
<div>コンテンツ</div>
</details>
カスタムコンポーネントとして実装する場合
既存システムの制約等の理由でやむを得ず<details>要素を使用せずカスタムコンポーネントとして実装する場合は、キーボードだけを使ってディスクロージャーを開閉操作できるようにしてください。また、WAI-ARIAのステートおよびプロパティを適切に付与し、支援技術からもUIの状態にアクセスできるようにしてください。
ディスクロージャーコンポーネントに求められるキーボード操作要件、WAI-ARIAステートおよびプロパティについては、ARIA Authoring Practices Guide（APG）を参照してください。
参考情報