圖片的文字替代方法

使用 alt 屬性提供圖片替代文字

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

圖片是多數網頁的重要元素,對低視能使用者而言也是一大黏著點。我們必須考慮圖片在網頁中扮演的角色,才能找出圖片應該採用的替代文字類型。請看一下這張圖片。

<article>
    <h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
    <img src="imgs/160204193356-01-cat-500.jpg">
</article>

研究顯示 10 隻貓中,有 9 名在睡覺時安靜地判斷主人是否正在睡覺

cat

在這個頁面中,我們可以看到貓咪的圖片,圖解了貓的眾所周知判斷行為。螢幕閱讀器會使用其常值名稱 "/160204193356-01-cat-500.jpg" 朗讀這張圖片。這很重要,但完全不實用

您可以使用 alt 屬性提供不同於這張圖片的實用文字,例如「一隻貓咪在空中飄進太空」。

<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">

然後螢幕閱讀器會朗讀圖片的簡短說明 (顯示在黑色 VoiceOver 列中),使用者可以選擇是否前往文章。

修改後替代文字的圖片

關於 alt 的幾則註解:

  • alt 可讓您指定在圖片無法使用時,使用一個簡單的字串,例如在圖片無法載入、網頁檢索漫遊器存取,或螢幕閱讀器遇到圖片時。
  • alttitle 或任何類型的說明文字不同,因為只有在圖片無法使用時才會使用。

撰寫實用的替代文字是一項藝術工作。為了將字串成為可用文字替代選項,其必須在同一個背景資訊中傳送與圖片相同的概念。

假設網頁刊頭廣告中含有連結標誌圖片 (如上所示),我們可以精確地描述圖片中的「Funion 標誌」。

<img class="logo" src="logo.jpg" alt="The Funion logo">

雖然您可能會想為「首頁」或「主頁」提供較簡單的文字替代,但這樣對低視能和視障使用者而言是一大福音。

但如果螢幕閱讀器使用者想找出網頁上刊頭廣告的標誌,將「Home」的替代值設為「home」的做法,反而會造成混淆。視障使用者也面臨相同的挑戰,也就是判斷點選網站標誌是什麼行為,就像使用螢幕閱讀器的使用者一樣。

不過,描述圖片並不是每次都很有用。舉例來說,假設搜尋按鈕中有放大鏡圖片,其中包含「Search」字樣。如果文字不存在,您應該為該圖片指定「search」替代值。不過,由於我們有顯示文字,螢幕閱讀器會擷取並朗讀「search」一詞,因此圖片上也有相同的 alt 值是多餘的。

然而,如果省略 alt 文字,可能會改為聽到圖片檔案名稱,這種名稱既無使用又可能造成混淆。在這種情況下,只要使用空白的 alt 屬性,螢幕閱讀器就會完全略過圖片。

<img src="magnifying-glass.jpg" alt="">

總結來說,所有圖片都應有 alt 屬性,但並非所有圖片都應包含文字。重要圖片應包含可簡要說明圖片的描述性替代文字,而裝飾性圖片則應包含空白的替代屬性,也就是 alt=""