使用 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」或「main page」,但這對低視力和視力正常的使用者都沒有幫助。
但請想像,如果螢幕閱讀器使用者想在網頁上找到主頁標誌,為其指定「home」的 alt 值,實際上會造成更混淆的體驗。對於螢幕閱讀器使用者而言,視障使用者面臨的挑戰與他們相同,也就是要瞭解點選網站標誌會產生什麼結果。
另一方面,描述圖片不一定有用。舉例來說,您可以考慮在搜尋按鈕中加入放大鏡圖片,並在圖片上加上「搜尋」文字。如果沒有文字,請務必將圖片的 alt 屬性值設為「search」。不過,由於我們有可見的文字,螢幕閱讀器會擷取並朗讀「search」一詞,因此圖片上的 alt
值就多餘了。
不過,如果我們不使用 alt
文字,可能會聽到圖片檔案名稱,這既無用又可能造成混淆。在這種情況下,您可以使用空白的 alt
屬性,螢幕閱讀器就會完全略過圖片。
<img src="magnifying-glass.jpg" alt="">
總而言之,所有圖片都應具有 alt
屬性,但不一定都需要文字。重要的圖片應附上說明替代文字,簡要說明圖片內容,而裝飾圖片則應附上空白替代屬性,也就是 alt=""
。