圖片的文字替代方法

使用 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」或「main page」,但這對低視力和視力正常的使用者都沒有幫助。

但請想像,如果螢幕閱讀器使用者想在網頁上找到主頁標誌,為其指定「home」的 alt 值,實際上會造成更混淆的體驗。對於螢幕閱讀器使用者而言,視障使用者面臨的挑戰與他們相同,也就是要瞭解點選網站標誌會產生什麼結果。

另一方面,描述圖片不一定有用。舉例來說,您可以考慮在搜尋按鈕中加入放大鏡圖片,並在圖片上加上「搜尋」文字。如果沒有文字,請務必將圖片的 alt 屬性值設為「search」。不過,由於我們有可見的文字,螢幕閱讀器會擷取並朗讀「search」一詞,因此圖片上的 alt 值就多餘了。

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

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

總而言之,所有圖片都應具有 alt 屬性,但不一定都需要文字。重要的圖片應附上說明替代文字,簡要說明圖片內容,而裝飾圖片則應附上空白替代屬性,也就是 alt=""