関連リスト(記述リスト) [文書構造]

関連リスト(記述リスト)は、全体に対して<dl>要素を用い、リスト内の名前(ラベル)を<dt>要素、値を<dd>要素を用いてマ、それぞれをマークアップする

解説

名前(ラベル)と値の組み合わせになっている関連リスト(記述リスト)を用いる場合、ブラウザや支援技術などのユーザーエージェントが解釈できるように、そのリスト全体に<dl>要素、名前(ラベル)には<dt>要素、値には<dd>要素をそれぞれ用いてマークアップします。そうすることによって、関連リスト(記述リスト)がマシンリーダブルになります。

HTML5では「関連リスト」または「記述リスト」と称していますが、それまでは「定義リスト」と呼ばれ、ある用語には<dt>要素、その用語の説明文には<dd>要素を用いてそれぞれマークアップしていました。HTML5でこのような用語とその説明文の組み合わせをマークアップする際には、その用語を<dfn>要素でマークアップする必要があります。

事例 1. 関連リスト(記述リスト)のマークアップ

悪い例


<p>Webアクセシビリティ<br>
ユーザーの利用条件(年齢、障害の有無、一時的な状況など)、ユーザーが使用している利用端末(ブラウザや支援技術を含む)、閲覧場所等に関係なく、ひとりでも多くの人がより多くのコンテキストにおいてWebを利用できるようにすること。</p>

用語とその説明文との組み合わせだが、<p>要素を用いたパラグラフ内で改行しているだけなので、ユーザーエージェントにはある用語とその説明文との組み合わせであることが分からない。

良い例


<dl>
<dt><dfn>Webアクセシビリティ</dfn></dt>
<dd>ユーザーの利用条件(年齢、障害の有無、一時的な状況など)、ユーザーが使用している利用端末(ブラウザや支援技術を含む)、閲覧場所等に関係なく、ひとりでも多くの人がより多くのコンテキストにおいてWebを利用できるようにすること。</dd>
</dl>

<dl>要素用いて、関連リスト(記述リスト)としてマークアップしている。さらに、用語を<dfn>要素を用いてマークアップしている。

『JIS X 8341-3:2016 / WCAG 2.0』の達成基準

1.3.1 情報及び関係性の達成基準(レベル A)
何らかの形で提示されている情報、 構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。

JIS X 8341-3:2016 / WCAG 2.0「1.3 適応可能のガイドライン」