HTML の<dl>要素に関する新たな知見
Simon Willison は Ben Myers の記事を通じて、HTML の<dl>要素に関する最新仕様とアクセシビリティの実装ベストプラクティスを解説し、開発者がより正確な記述リストを作成するよう促している。
キーポイント
複数<dd>のサポート
<dt>要素の後に複数の<dd>要素を続けて記述することが標準的に許容されており、1対多の関係性を表現できる。
スタイリングのための<div>ラップ
CSS でグループとして styling する必要がある場合、<dt>と<dd>のペアを<code><div></code>で囲むことが推奨されるが、これは<dl>要素内でのみ有効な構文である。
ARIA ラベルによるアクセシビリティ
<dl>要素に aria-labelledby 属性を使用し、関連する見出し（例：<h2>）を参照させることで、スクリーンリーダー利用者に文脈を提供できる。
名称の正式変更
2008 年の HTML5 ドラフト以降、「定義リスト」ではなく「記述リスト（Description Lists）」として公式に呼称されている。
重要な引用
A <code><dt></code> can be followed by <em>multiple</em> <code><dd></code>
They've been called "description lists", not "definition lists", since an HTML5 draft in 2008.
You can optionally group the <code><dt></code> and <code><dd></code> elements in a <code><div></code> for styling - but only a <code><div></code>.
影響分析・編集コメントを表示
影響分析
この記事は、Web 標準の基礎的な要素である記述リスト（Description List）の実装において、長年の誤解や慣習を正し、現代のアクセシビリティ基準に則ったコーディングを促す重要な役割を果たします。特にスクリーンリーダー対応が重視される昨今の Web 開発環境において、<dl>要素の正しい構文と ARIA 属性の活用は、すべての開発者が知っておくべき必須知識です。
編集コメント
AI や最新技術のトレンドではありませんが、Web 開発における基礎的な実装品質とインクルーシブデザインを向上させるための重要な指針です。
この Ben Meyer による記事から、dl 要素についていくつか新しいことを学びました：
- dl 要素の後に複数の dt/dd を続けることができます。
- スタイリングのために dt と dd のグループを optionally として div で囲むこともできますが、これは dl 要素内でのみ許可されます。
- ARIA を使用してラベル付けすることも可能です。
- これらは 2008 年の HTML5 ドラフト以来「定義リスト」ではなく「説明リスト」と呼ばれています。
したがって、以下は有効な記述です：
h2 id="credits">Credits</h2>
dl aria-labelledby="credits">
div>
dt>Author</dt>
dd>Jeffrey Zelman</dd>
dd>Ethan Marcotte</dd>
div>
dl>
説明リストのスクリーンリーダーサポートに関する Adrian Roselli の有用なノートはこちらです：screen reader support for description lists。
Via Hacker News
Tags: css, html, screen-readers, web-standards
原文を表示
I learned a few new-to-me things about the `` element from this article by Ben Meyer:
- A can be followed by multiple
- You can optionally group the and elements in a for styling - but only a .
- You can label them using ARIA.
- They've been called "description lists", not "definition lists", since an HTML5 draft in 2008.
So this is valid:
h2 id="credits">Creditsh2>
dl aria-labelledby="credits">
div>
dt>Authordt>
dd>Jeffrey Zeldmandd>
dd>Ethan Marcottedd>
div>
dl>Here's a useful note from Adrian Roselli on screen reader support for description lists.
Via Hacker News
Tags: css, html, screen-readers, web-standards
関連記事
今日のまとめ
AI日報で今日の重要ニュースをまとめ読み