dt元素内交互式内容的无障碍树暴露方式及放置合理性咨询

问题背景 #

在dt元素内放置链接是合法的HTML写法，首个网站甚至就这么做了：

<dl>
<dt><a>My Link</a></dt>
<dd>Info about link</dd>
</dl>

不过在summary元素内放置交互式内容会存在可访问性问题，因为许多浏览器会将该元素暴露为类似按钮的控件。早期标准中，dt会被暴露为term角色，而该角色原本不应包含链接这类交互式内容。

一、无障碍树的暴露机制 #

现代浏览器及主流辅助技术对<dt>内嵌套交互式内容的处理逻辑如下：

• <dt>自身仍会被识别为term语义角色，明确其作为定义列表术语的身份；
• 内部的交互式元素（如<a>链接）会被独立暴露为对应角色（比如link），屏幕阅读器等工具会同时读取术语文本和交互控件的属性，用户可以直接聚焦并激活交互式内容，不会被<dt>的角色干扰。

早期部分旧版环境可能存在语义识别冲突，但目前Chrome、Firefox、Safari搭配NVDA、VoiceOver、JAWS等常用辅助技术，都能正确解析这种嵌套结构的语义。

二、是否应该在dt内放置交互式内容 #

需要结合实际场景判断：

• 合理场景：如果术语本身就是需要跳转的核心入口（比如术语是词条名称，点击后进入详细解释页面），这种嵌套语义通顺，只要满足：
  • 链接文本与<dt>的术语内容一致，避免歧义；
  • 不要在单个<dt>内嵌套多个交互式元素（同时放链接、按钮等），防止辅助技术用户混淆交互目标。
• 不推荐场景：如果交互功能和术语本身无关，只是额外附加的操作，建议将交互式元素放在<dd>区域，或通过aria-describedby等属性关联术语与控件，避免破坏定义列表的语义结构，降低无障碍访问门槛。

需要注意：<summary>和<dt>的核心区别在于，<summary>本身是交互式角色（被识别为button），内部嵌套交互元素会导致双重交互冲突；而<dt>是纯语义角色，不会触发交互，因此不会出现类似<summary>的可访问性问题。

内容的提问来源于stack exchange，提问作者user990666