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