ARIA: figure 角色

描述

figure 是内容中一个可感知的区域，通常包含一个图形文档、图像、代码片段或示例文本。figure 的各部分可能支持用户导航。任何需要被组合在一起并作为图形（可能包括图像、视频、音频、代码片段或其他内容）消费的内容都可以使用 role="figure" 来标识为图形。

html

<div role="figure" aria-labelledby="caption">
  <img src="image.png" alt="put image description here" />
  <p id="caption">Figure 1: The caption</p>
</div>

在上面的示例中，我们有一个由两个独立内容项（图像和标题）组成的图形。它被一个 <div> 元素包裹，该元素使用 role="figure" 将内容标识为图形。

对于 HTML，请使用 <figure> 和 <figcaption> 元素。figcaption 将作为图形的可访问名称。如果不使用 HTML，或者在改造旧的 HTML 时，请在 figure 上使用 aria-labelledby，指向图形的标题。如果不存在可见的标题，则可以使用 aria-label。

html

<div role="figure" aria-labelledby="figure-1">
  …
  <p id="figure-1">Text that describes the figure.</p>
</div>

当文本是简洁的标签时，请使用 aria-labelledby。
当文本是较长的描述时，请使用 aria-describedby。
当不存在可见的图形标题时，请使用 aria-label。

这可以通过 HTML 的 <figure> 元素和 <figcaption> 来语义化实现，而无需 ARIA。

html

<figure>
  <img src="image.png" alt="put image description here" />
  <figcaption>Figure 1: The caption</figcaption>
</figure>

注意： 如果在工作中可行，您应该使用适当的语义化 HTML 元素来标记图形及其标题 — <figure> 和 <figcaption>。

关联的 WAI-ARIA 角色、状态和属性

aria-describedby: 包含作为图形标题的引用文本的元素的 ID。
aria-labelledby: 包含作为标签的文本的元素的 ID。
aria-label: 如果没有可以作为标签的文本元素，您可以将标签直接作为 figure 角色元素的 aria-label 的值，或者作为 <figure> 元素的 aria-label 的值。

<div role="figure" aria-labelledby="figure-1">
  <img
    src="diagram.png"
    alt="diagram showing the four layers of awesome and their relative priority order —
        music, cats, nature, and ice cream" />
  <pre>
`
        let awesome = ['music', 'cats', 'nature', 'ice cream'];
      `</pre
  >
  <p id="figure-1">Figure 1: The four layers of awesome.</p>
</div>

最佳实践

只有在必须时才使用 role="figure" — 例如，如果您无法控制 HTML，但可以通过 JavaScript 动态地事后改进可访问性。

如果可行，您应该使用适当的语义化 HTML 元素来标记图形及其标题 — <figure> 和 <figcaption>。例如，我们上面的示例应重写如下：

html

<figure>
  <img
    src="diagram.png"
    alt="diagram showing the four layers of awesome and their relative priority order —
         music, cats, nature, and ice cream" />
  <pre>
`
    let awesome = ['music', 'cats', 'nature', 'ice cream'];
  `</pre
  >
  <figcaption>Figure 1: The four layers of awesome.</figcaption>
</figure>