ARIA：img 角色

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

您不應該依賴各個影像的替代文字向輔助技術傳達上下文；大多數螢幕閱讀器會將設定了role="img"的元素視為黑盒，並且不會訪問其中的各個元素。因此，請為影像提供全面且描述性的替代文字，可以在周圍的文字中提供，也可以使用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 影像，建議在外部<svg>元素上設定role="img"併為其提供標籤。這將導致螢幕閱讀器將其視為單個實體並使用標籤對其進行描述，而不是嘗試讀出所有子節點。

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

在某些情況下，輔助技術使用者將無法獲得以某些方式表達的內容的含義，例如透過某些媒體或以某些方式暗示的內容。對於影像，解決方法很明顯（可以使用alt屬性），但對於混合或其他某些型別的內容，解決方法並不那麼明顯，role="img"可以發揮作用。

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

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

🐈 😂、🐈和😂是表情符號的實體引用，讀作“貓”和“帶淚的表情”，但這並不一定有意義——隱含的含義可能是“那隻貓太可愛了”，因此我們在aria-label中包含它以及role="img"。

這在某些瀏覽器/螢幕閱讀器組合中似乎可以正常工作，但其中一些最終會將標籤讀出兩次。請謹慎使用並進行徹底測試。

另一個可能適合使用此方法的示例是使用ASCII表情符號組合，例如著名的“翻桌”

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

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

某些型別的使用者介面元件在平臺輔助功能 API 中表示時只能包含文字。輔助功能 API 無法表示包含在img中的語義元素。為了解決此限制，瀏覽器會自動將角色presentation應用於任何img元素的所有後代元素，因為它是不支援語義子元素的角色。

例如，請考慮以下包含標題的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>

aria-label 或 aria-labelledby

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

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