ARIA：figure 角色

ARIA 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 时，请在图形上使用 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。

这可以通过语义方式完成，无需使用 ARIA，只需使用 HTML 的 <figure> 元素以及 <figcaption> 即可。

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

如果没有包含可以用作标签的文本的元素，您可以将标签直接作为 aria-label 的值添加到具有 figure 角色的元素或 <figure> 元素上。

键盘交互

没有角色特定的键盘交互。

所需的 JavaScript 功能

没有角色特定的 JavaScript 要求。如果您无法控制 HTML 语义，可以通过 JavaScript 添加这些角色和属性来提高 HTML 的无障碍性。

示例

我们可以扩展页面上的初始示例，以识别一段文本，该文本通过在 aria-labelledby 中引用其 ID 来提供图形的描述性标签。

html
<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>

规范

规范
可访问的富互联网应用程序 (WAI-ARIA)
# figure

另请参阅