HTML 描述列表的语义化实践：dl/dt/dd 的适用边界与屏幕阅读器支持

在前端开发中，键值对展示是一种高频出现的 UI 模式 —— 从商品详情页的规格参数到用户资料的元数据列表，再到游戏角色的属性面板。许多开发者习惯用嵌套 <div> 配合 CSS 实现这类布局，却忽略了 HTML 原生提供的语义化方案：<dl>（描述列表）及其子元素 <dt>（描述项）和 <dd>（描述详情）。正确运用这组元素不仅能提升代码可读性，更能为屏幕阅读器用户提供结构化的导航体验。

结构解剖与合法嵌套

描述列表由三个层级构成。<dl> 作为容器，类似于 <ul> 或 <ol> 在列表中的角色。<dt> 承载键（name），<dd> 承载值（value）。一个关键且常被忽视的规则是：一个 <dt> 可以对应多个 <dd>，这在处理多值属性时尤为实用。

<dl>
  <dt>作者</dt>
  <dd>Jeffrey Zeldman</dd>
  <dd>Ethan Marcotte</dd>
  <dt>出版社</dt>
  <dd>New Riders Pub</dd>
</dl>

当需要为样式目的包裹 <dt> 和 <dd> 时，HTML 规范只允许使用 <div> 作为分组容器。这是唯一被许可的嵌套方式，其他元素（如 <section> 或 <article>）均不符合规范。

<dl>
  <div>
    <dt>护甲等级</dt>
    <dd>12</dd>
  </div>
  <div>
    <dt>生命值</dt>
    <dd>5 (2d6 - 2)</dd>
  </div>
</dl>

适用场景与边界判断

判断一个界面模式是否适合使用 <dl>，核心标准是 "是否构成键值对的语义关系"。以下是典型适用场景：

元数据展示：书籍详情页的标题 - 作者 - 出版社信息、用户资料页的邮箱 - 注册时间 - 权限等级。这类场景下，键值对之间存在明确的描述关系。

属性面板：游戏角色的能力值（STR/DEX/CON 等）、硬件产品的技术规格。D&D 的怪物属性块是教科书级案例 —— 护甲、生命、速度构成一个列表，能力值构成另一个列表，特性与动作又各自成组。

词汇表与术语定义：尽管 HTML5 已将 <dl> 从 "定义列表" 扩展为更通用的 "描述列表"，但术语 - 解释的映射仍是其经典用例。

需要避免的场景包括：纯粹用于布局的网格系统、对话内容（应使用 <dialog> 或带 cite 属性的 <blockquote>）、以及键值关系不明确的混合列表。

屏幕阅读器可访问性实现

语义化的核心价值在于辅助技术的识别能力。当屏幕阅读器遇到 <dl> 时，能够向用户传达以下信息：列表中键值组的总数、当前所处的位置索引、以及提供跳过整个列表的快捷方式。这些体验在多数浏览器与屏幕阅读器组合中已得到支持。

为增强可访问性，建议为多个并列的描述列表添加 aria-label 或 aria-labelledby 属性，明确每个列表的用途：

<dl aria-label="能力值">
  <div><dt>力量</dt><dd>7 (-2)</dd></div>
  <div><dt>敏捷</dt><dd>15 (+2)</dd></div>
</dl>
<dl aria-label="熟练项">
  <div><dt>感官</dt><dd>黑暗视觉 60 尺</dd></div>
</dl>

需要注意的是，<dl> 的支持并非完全统一。部分旧版屏幕阅读器可能将其降级为普通文本节点处理。若目标用户群体依赖特定辅助技术，建议通过实际测试验证体验，或暂时使用带明确 ARIA 标注的 <ul> 作为降级方案。

工程实现检查清单

在项目中落地描述列表时，可参考以下检查项：

结构层：确认 <dt> 与 <dd> 直接位于 <dl> 内，或使用 <div> 分组
语义层：验证每个键值对确实存在 "名称 - 值" 的语义关系，而非仅为视觉对齐
样式层：利用 <div> 分组实现 CSS Grid 或 Flexbox 布局，避免过度嵌套
无障碍层：为多个并列列表添加 aria-label，确保屏幕阅读器用户理解上下文
测试层：在 NVDA、JAWS 或 VoiceOver 中验证列表导航功能是否正常

替代方案与降级策略

当 <dl> 不适用或需要更广泛的辅助技术支持时，可考虑以下替代方案：

表格模式：对于需要行列对齐的复杂数据，<table> 配合 <th scope="row"> 能提供更明确的结构关系，且表格导航在屏幕阅读器中支持度极高。

列表模式：使用 <ul> 配合标题元素（如 <h3> 作为键，<p> 作为值），并通过 ARIA 属性补充语义信息。

微数据增强：在 <dl> 基础上添加 Schema.org 的词汇表标记，可同时满足语义化 HTML 和结构化数据的需求。

结语

<dl> 元素是 HTML 中一个被低估的语义工具。它不仅能准确表达键值对的结构关系，还为辅助技术用户提供了导航便利。在实现时，开发者应当关注规范允许的嵌套规则、屏幕阅读器的实际支持情况，以及通过 ARIA 属性增强上下文信息。将这些细节纳入代码审查清单，能够在不增加开发成本的前提下，显著提升产品的可访问性水平。

参考来源

Ben Myers, "On the ", 2021, https://benmyers.dev/blog/on-the-dl/
HTML Living Standard, "The dl element", https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element

web

内容声明：本文无广告投放、无付费植入。

如有事实性问题，欢迎发送勘误至 i@hotdrydog.com。