Web 標準 HTML <dl> 要素の再評価──セマンティックな名前・値ペアの実装ガイド
<div> の羅列を避け、スクリーンリーダー等の支援技術が構造を正しく解釈できるアクセシブルな名前・値リストの構築手法を解説。
リリース: 2021-08-06 · 読了 3 分何が起きた
<dl> (Description List) は <dt> (Term) と <dd> (Detail) を使い、名前と値のペアを構造化する HTML 要素である。
1つの <dt> に対して複数の <dd> を紐付けることが可能であり、著者リストのような 1:N の関係も表現できる。
スタイリングの利便性のために、<dt> と <dd> のグループを <div> でラップすることが W3C 仕様で明示的に許可されている。
セマンティックなマークアップにより、スクリーンリーダーはリスト内の項目総数や現在の位置をユーザーに正確に通知できる。
なぜ重要
単なる見た目（<div>）ではなく意味構造（<dl>）を採用することで、アクセシビリティ対応の自動化スコアが向上し、支援技術ユーザーの離脱率を下げられる。
👁️ 開発者
フロントエンドエンジニアは、メタデータ表示や定義リストの実装において <div> による場当たり的な実装を止め、<dl> を標準採用することで保守性とアクセシビリティを同時に改善できる。
🇯🇵 日本
アクセシビリティ対応が急務となっている国内の [Web 制作・SaaS 開発] 現場において、コンポーネントライブラリの基本設計に <dl> を組み込むことで、JIS X 8341-3 準拠への対応工数を削減できる。