dl标签是语义容器而非排版工具;dt不可嵌套p,因读屏器误识为段落而非术语;一个dt可对应多个连续dd;用CSS Grid需显式定义列结构;动态渲染时DOM断裂(如孤立dd、dt/dd被包裹、顺序颠倒)会导致无障碍失效。

dl 标签不是排版工具,而是语义容器;只要结构错一层,读屏器就可能完全跳过整个术语表——这不是样式问题,是 DOM 树断裂。
为什么dt里不能套p
浏览器允许,但读屏器会把 <dt><p>API</p></dt> 识别为“段落”,而不是“API”这个术语。它本就是短语级内容,天然独占一行。dt 支持 <code>、<em> 等行内元素,加 p 反而引入多余语义层级。如果需要换行或强调,用 CSS 控制更安全。
一个dt对应多个dd的写法必须连续
这是 API 文档、参数说明中最常见的场景:字段名一次定义,后面跟类型、默认值、是否必填三段描述。
<dl> <dt>timeout</dt> <dd>number</dd> <dd>3000</dd> <dd>required</dd> </dl>
- 必须连续写,中间不能插
p、div或空行 - 别为了视觉对齐拆成三个
dt——那会丢失“这三项都属于timeout”的语义关联 - 读屏器会按顺序朗读:“timeout,类型:number,默认值:3000,是否必填:required”
用 CSS Grid 布局时dl必须显式声明列结构
默认的 margin-left 缩进在嵌套容器或响应式中极易错位。用 Grid 能绑定术语与描述的位置关系,但关键点在于:
-
dl { display: grid; grid-template-columns: auto 1fr; }——不依赖文档流,显式两列 -
dt { grid-column: 1; }和dd { grid-column: 2; margin: 0; }——清除默认缩进,防止叠加 - 窄屏下必须还原单列:
@media (max-width: 480px) { dl { grid-template-columns: 1fr; } dt, dd { grid-column: 1; } }
动态渲染时最隐蔽的错误是 DOM 结构断裂
从 JSON 渲染术语表时,程序常犯的错误不是样式问题,而是结构失效:
- 孤立的
dd(前面没dt)——浏览器不报错,但无障碍测试工具直接标红 -
dt和dd被div或p包裹在中间——dl的子元素必须全是dt或dd - 多个
dt共用一个dd时,顺序写反(dd在前)——语义失效,读屏器无法建立映射
真正难调试的是这些:不报 JS 错误,页面看着也正常,但对屏幕阅读器用户来说,整张术语表等于不存在。


















