`figure`

标记一个自成一体的图示块 — 图片、图表、代码清单 — 通常配有说明文字。优先使用原生 <figure> 元素；仅在宿主元素无法使用 <figure> 时，才使用 role="figure"。

何时使用

使用 <figure> 和 <figcaption>。原生元素自动处理角色、说明文字关联以及文档大纲语义。

role="figure" 仅适用于无法使用原生元素的场景。需配合无障碍名称使用 — 要么通过 aria-labelledby 指向一个说明文字元素，要么通过 aria-label 直接提供说明文字。

图示元素在屏幕阅读器中会宣告”图示，[说明文字]“，表明其内容是图示性的，而非连续正文。代码清单、示意图、图表以及需要配说明的内联图片均适合使用此角色 — 但不应滥用于每一张装饰性图片。

常见错误

<figure> 既无 <figcaption> 也无 aria-label。该图示缺乏无障碍名称，角色的添加意义不大。
在包裹 <img> 的 <div> 上使用 role="figure"，而该 <img> 的 alt 已涵盖描述信息。此做法冗余；直接使用 <img> 即可。
将 <figcaption> 放在 <figure> 外部。说明文字必须是 <figure> 的直接子元素，原生关联才能生效。
页面中多个图示使用相同的说明文字。应通过 aria-labelledby 指向唯一元素，确保按图示导航时能正常工作。
在 <img> 元素上直接使用 role="figure"。应将该角色用于包含图片的容器元素，而非图片本身。

示例

<!-- 推荐写法 -->
<figure>
  <img src="/images/keyboard-trap.svg" alt="Focus indicator stuck on a modal overlay with no escape route">
  <figcaption>A keyboard trap inside a poorly built modal.</figcaption>
</figure>

<!-- 无法使用 <figure> 时 -->
<div role="figure" aria-labelledby="diag-1">
  <img src="…" alt="…">
  <p id="diag-1">Tab order through an inaccessible single-page app.</p>
</div>