definition

使用场景

对于词汇表和术语/定义对，应使用原生 HTML 描述列表：<dl> 配合 <dt>（术语）和 <dd>（定义）。若在正文中对某个术语进行内联定义，则使用 <dfn>。这两种方式无需 ARIA 即可直接暴露给屏幕阅读器。

仅当外层元素无法使用 <dd> 或 <dfn> 时，才适合使用 role="definition"——例如某些 CMS 将词汇条目渲染为 <div> 的情况。此时需在对应的术语元素上配合使用 role="term"。

该角色告知屏幕阅读器：此元素包含的是定义（即解释内容），有别于被定义的术语本身。大多数辅助技术对定义的额外导航支持有限，仅宣读角色名称——因此实际价值有限，几乎所有情况下原生元素均已足够。

常见错误

• 使用 role="definition" 但未配对 role="term"，导致定义缺少对应术语。
• 将术语标记为 role="definition"，将定义标记为 role="term"——正好颠倒了正确的对应关系。
• 将 role="definition" 用于正文中恰好含有定义内容的普通 <p> 元素；更好的做法是在正文中对术语本身使用 <dfn>。
• 用 role="list" 和 role="listitem" 构建词汇表，将术语和定义混在一个列表项中——应使用 <dl>，以保留术语与定义的配对关系。
• <dfn> 缺少 id 属性，导致其他页面无法通过锚点链接到该定义，而定义的最大价值正在于此。

示例

<!-- 推荐用法 -->
<dl>
  <dt>ARIA</dt>
  <dd>Accessible Rich Internet Applications, a set of attributes that add accessibility semantics to HTML.</dd>
  <dt>APG</dt>
  <dd>ARIA Authoring Practices Guide, the W3C reference of common widget patterns.</dd>
</dl>

<!-- 当无法使用原生元素时 -->
<div role="term" id="aria-term">ARIA</div>
<div role="definition" aria-labelledby="aria-term">
  A set of attributes that add accessibility semantics to HTML.
</div>