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>