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

另請參閱