要約
details
要素を使用すると、すべてのユーザーがいつ追加情報を読むかを決定できます。
テクニック
- 追加情報を折りたたむには
details
要素を使用します [[WCAG-1.3.1]] -
summary
要素に意味のあるラベルを付けます [[WCAG-2.4.6]]
例
解説
details
要素により、JavaScript に依存せずに情報を展開したり折りたたんだりすることができます。スクリプトがサポートされていないことが多いデジタル出版物での使用に最適であり、すべてのユーザーが情報を利用できるため、拡張説明を提供するためのアクセシブルな方法でもあります。
注記
EPUB リーディングシステムにおけるdetails
要素のサポートはまだ一貫していません。
リーディングシステムが出版物を静的にページ付けする方法により、 details
要素を展開すると、ページの内容が画面外に押し出される可能性があります(つまり、次のページにリフローされません)。
ユーザーは、コンテンツにアクセスするために、ページ区切りモードではなくスクロールモードで読む必要がある場合があります。
デフォルトでは、 details
要素内のテキストは最初は折りたたまれています。 summary
要素で提供されるラベルのみが表示されます。ユーザーがこのラベルを(たとえば、クリックまたはタップして)アクティブ化すると、要素が展開され、追加情報が表示されます。
details
要素は、ユーザーが最も恩恵を受けそうな場所に配置する必要があります。たとえば、表の要約はその表の前に表示されると最も役立ちます。また、画像の説明は、説明している画像の前に表示できます。あいまいさをなくすために、 aria-details
属性を使用して、details
要素を関連するコンテンツ項目に紐付けることができます。情報を論理的な順序で配置できない場合、この属性は支援技術のユーザーが関連付けられているコンテンツに遭遇したときに、その要素の位置を特定できるようになります。
details
要素を使用する場合は、意味のあるラベル(つまり、情報の目的を説明するラベル)を必ず提供してください。要素に拡張説明が含まれている場合は、ラベルを「説明」にします。「詳細」のような一般的なラベルは使用しないでください。このラベルを使用すると、探している情報かどうかを判断するために、ユーザーが要素を展開して情報の一部またはすべてを読む必要があるからです。
関連リンク
- KB —非表示コンテンツ
- KB —画像の説明
- MDN — <details>: 詳細折りたたみ要素
- HTML —
details
要素 - ARIA —
aria-details
(プロパティ)