HTML の description list 要素 <dl> の活用
Ben Myers は、name-value ペアを表現する HTML の <dl> (description list) 要素について、その構造と用途、アクセシビリティ上の価値を解説している。
要素の構造と用途
<dl> 要素は name-value ペアのリストを表現するために使用される。<dl> 要素は <dl>、<dt>、<dd> の3つの要素で構成される。<dt> は description term の略で名前を、<dd> は description detail の略で値を表す。1つの <dt> に対して複数の <dd> を持たせることができ、<dt>/<dd> グループをスタイリングのため <div> でラップすることが可能である。ただし、<dt>/<dd> グループをラップできるのは <div> のみである。
意味論的価値とアクセシビリティ
HTML5 より前、<dl> は definition list（定義リスト）と呼ばれており、用語とその定義から成る用語集のみを表現する目的で設計されていた。しかし現在、この要素はより広範な name-value ペアのパターンを表現するために活用されている。<dl> 要素をパターンとして認識することで、スクリーンリーダーユーザーが利益を得られるとされている。このパターンに対する支援はまだ普遍的ではない。
この記事は元記事の事実のみに基づいて自動生成されました。
筆者の見立て
- スクリーンリーダーが
<dl>パターンを認識した場合、リスト内の name-value グループの数をユーザーに伝えられる可能性を示唆している。 - スクリーンリーダーがユーザーにリスト内のどの位置にいるかを伝えられる可能性を示唆している。
- ブラウザがパターンを認識することで、ユーザーが関心のないリストをブロックとしてスキップできる可能性を示唆している。
- 理論的にせよ数個のユーザーの利便性向上をもたらすパターンが見出せれば、そのパターンは意味論的な関連性を持つ有力な候補となると解釈している。
- description list パターンは、能力値スコアや攻撃など、見た目が大きく異なるリストに跨って活用できると解釈している。
出典
Ben Myers『On the <dl>』https://benmyers.dev/blog/on-the-dl/ (MDN docs on the <dl> による報道)