使用 alt 屬性提供圖片替代文字
圖片是多數網頁的重要元素,對低視能使用者而言也是一大黏著點。我們必須考慮圖片在網頁中扮演的角色,才能找出圖片應該採用的替代文字類型。請看一下這張圖片。
<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 名在睡覺時安靜地判斷主人是否正在睡覺
在這個頁面中,我們可以看到貓咪的圖片,圖解了貓的眾所周知判斷行為。螢幕閱讀器會使用其常值名稱 "/160204193356-01-cat-500.jpg"
朗讀這張圖片。這很重要,但完全不實用
您可以使用 alt
屬性提供不同於這張圖片的實用文字,例如「一隻貓咪在空中飄進太空」。
<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">
然後螢幕閱讀器會朗讀圖片的簡短說明 (顯示在黑色 VoiceOver 列中),使用者可以選擇是否前往文章。
關於 alt
的幾則註解:
alt
可讓您指定在圖片無法使用時,使用一個簡單的字串,例如在圖片無法載入、網頁檢索漫遊器存取,或螢幕閱讀器遇到圖片時。alt
與title
或任何類型的說明文字不同,因為只有在圖片無法使用時才會使用。
撰寫實用的替代文字是一項藝術工作。為了將字串成為可用文字替代選項,其必須在同一個背景資訊中傳送與圖片相同的概念。
假設網頁刊頭廣告中含有連結標誌圖片 (如上所示),我們可以精確地描述圖片中的「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=""
。