ARIA: img 角色

描述

任何應被視為單個影像（可能包括影像、影片、音訊、程式碼片段、表情符號或其他內容）的內容集都可以使用 role="img" 進行標識。

你不應依賴單個影像的 alt 文字來向輔助技術傳達上下文；大多數螢幕閱讀器會將設定了 role="img" 的元素視為一個黑箱，並且無法訪問其內部的單個元素。因此，請為影像提供全面、整體的描述性 alt 文字，要麼在周圍文字中提供，要麼使用 aria-label 屬性，並在影像失敗時為搜尋引擎或視力正常的使用者編寫 alt 屬性到頁面上。

<div role="img" aria-label="Description of the overall image">
  <img src="graphic1.png" alt="alternative text" />
  <img src="graphic2.png" alt="in case the images don't load" />
</div>

如果你希望在頁面上新增對影像可見的字幕或標籤，可以使用

• aria-labelledby，當文字是簡潔的標籤時。
• aria-describedby，當文字是較長的描述時。

例如

<div role="img" aria-labelledby="image-1">
  …
  <p id="image-1">Text that describes the group of images.</p>
</div>

如果影像純粹是裝飾性的，請考慮使用 presentation 角色。

SVG 和 role="img"

如果你在頁面中使用嵌入式 SVG 影像，最好在外部 <svg> 元素上設定 role="img" 併為其提供一個標籤。這將使螢幕閱讀器將其視為單個實體，並使用標籤進行描述，而不是嘗試讀取所有子節點。

<svg role="img" aria-label="Description of your SVG image">
  <!-- contents of the SVG image -->
</svg>

使用 role="img" 來傳達被隱藏或隱含的含義

在某些情況下，輔助技術使用者無法理解透過某些方式、透過某些媒體或以某些方式隱含表達的內容的含義。對於影像來說，這種情況很容易解決（可以使用 alt 屬性），但在混合內容或其他某些型別的內容中，情況並非如此明顯，這時 role="img" 就可以派上用場了。

例如，如果你在文字中使用表情符號，對於視力正常的使用者來說，含義可能很明顯，但使用螢幕閱讀器的人可能會感到困惑，因為表情符號可能根本沒有文字表示，或者替代文字可能令人困惑且與所使用的上下文不符。例如，考慮以下程式碼

<div role="img" aria-label="That cat is so cute">
  <p>&#x1F408; &#x1F602;</p>
</div>

🐈 😂，即 🐈 和 😂，是表情符號的實體引用，讀作“貓”和“喜極而泣的臉”，但這並不一定有意義——隱含的意思可能是“這隻貓太可愛了”，所以我們將其與 role="img" 一起包含在 aria-label 中。

這在某些瀏覽器/螢幕閱讀器組合中似乎效果還可以，但有些組合會重複朗讀標籤。請謹慎使用並進行徹底測試。

另一個可能適合這種情況的例子是使用 ASCII 表情符號組合，例如傳說中的“翻桌”

<div role="img" aria-label="Table flip">
  <p>(╯°□°）╯︵ ┻━┻</p>
</div>

如果使用 aria-labelledby，螢幕閱讀器會朗讀它。在這種情況下，只有 aria-label 的內容會被朗讀給螢幕閱讀器使用者，隱藏了字元的亂碼，而無需後代 ARIA 來隱藏內容，但也隱藏了可能屬於影像一部分的潛在內容。

所有後代都是展示性的

有些使用者介面元件型別，當在平臺可訪問性 API 中表示時，只能包含文字。可訪問性 API 沒有辦法表示 img 中包含的語義元素。為了解決這個限制，瀏覽器會自動將 presentation 角色應用於任何 img 元素的後代元素，因為 presentation 是一個不支援語義子項的角色。

例如，考慮以下包含標題的 img 元素。

<div role="img"><h3>Title of my image</h3></div>

由於 img 的後代是裝飾性的，因此以下程式碼等效

<div role="img"><h3 role="presentation">Title of my image</h3></div>

從輔助技術使用者的角度來看，由於前面的程式碼片段在 可訪問性樹 中等效於以下內容，因此標題不存在。

<div role="img">Title of my image</div>

關聯的 WAI-ARIA 角色、狀態和屬性

aria-label 或 aria-labelledby

需要一個可訪問的名稱。對於 HTML <img> 元素，使用 alt 屬性。對於所有其他具有 img 角色的元素，如果存在可見的標籤，則使用 aria-labelledby；否則，使用 aria-label。

示例

<span role="img" aria-label="Rating: 4 out of 5 stars">
  <span>★</span>
  <span>★</span>
  <span>★</span>
  <span>★</span>
  <span>☆</span>
</span>

規範

另見

• <img> 元素
• <svg> 元素
• <picture> 元素
• <audio> 元素
• <video> 元素
• ARIA: presentation 角色
• 可訪問性物件模型
• HTML 中的 ARIA