圖片替代文字的基本規則- 無障礙網頁設計
圖片的替代文字屬性 ( alt ) 是針對圖片的文字說明，而不是對圖片的補充，這意味著每張圖片都應該要有文字性的描述，並提供與圖片相同意義的訊息。但網頁中插入的圖片有各種不同的用途：有些圖片是為了提供資訊，例如組織圖、統計圖等；有些圖片則是提供連結，例如將 logo 或網站截圖當做連結；有些圖片是用來當做背景，甚至有些圖片只是純粹用來裝飾之用，正確的為圖片提供替代文字的確不是一件很容易的事。
在網頁中插入圖片的網頁標籤為 <img>，典型的 HTML 語法為：
<img src="demo.png" alt="圖片的替代文字放這" />其中的 alt 屬性就是添加圖片替代文字的地方。
為何要使用替代文字
- 替代文字可以對非文字性的內容提供文字敘述。當 screen reader 讀取網頁內容時，無法理解每張圖片所代表的意義是什麼，因此就必需提供替代文字，以便於 screen reader 能將圖片內容轉換成文字敘述。
- 如果圖片無法順利載入 (遺失或錯誤的路徑) 或使用者選擇不查看圖片時，瀏覽器就會用替代文字取代原本的圖片。
- 替代文字為圖片提供了語義和描述，這些圖片可以被搜索引擎讀取，有助於網站優化。
規則一：每一個 <img> 都必需有 alt 屬性
請務必牢記：不論圖片的用途是什麼，每個 <img> 都一定要有 alt= 的屬性，即便是不需要替代文字也必需使用 alt=””，這沒有例外情形。
規則二：正確的描述圖片的內容
替代文字要能具體的說明圖片所包含的意義，而不是描述這張圖片長的怎麼樣。例如，在網頁中插入下列圖片
替代文字應該是 alt=”Twitter 的 Logo 標誌” ( 或類似的文字敘述 )，但絕不應該是 alt=”藍色的鳥”。
規則三：功能性的圖片必需包含描述性的替代文字
所謂「功能性的圖片」是指會執行動作或具有某些功能的圖片，例如提供連結的圖片或是提供資訊的圖片 ( 如統計圖表 )，這些圖片是連結 ( link ) 唯一的內容。這類型圖片的替代文字就要具體描述所要執行的功能或所代表的意義，絕對不能使用空字串的 alt=””，例如：連結到其它網站時，圖片的替代文字應該是該網站的名稱或網址；連結到其它頁面時，圖片的替代文字就應該是該頁面的標題。
若是像統計圖表之類比較複雜的資訊內容，無法在 alt 中簡短明確的描述，就必需使用 longdesc 或其它方式來描述圖片所提供的資訊，有關 longdesc 的用法，日後會另闢專文討論。
規則四：裝飾用的圖片，請使用空的 alt
如果圖片只是用來裝飾網頁，不具功能性也沒有具體的資訊需要提供，請使用空字串的 alt ( alt=”” )，這是告訴 screen reader 遇到 alt=”” 的圖片時，請忽略不要管它。再次強調：即便是 alt=””，也一定要加上 alt 屬性，不能省略 ( 規則一 )。
規則五：利用 CSS 樣式表處理背景圖片
如果圖片只是當做背景，請利用 CSS 的 background-image 方式設定背景圖片，不要將圖片放在網頁中。同樣的，具有內容意義的圖片，也千萬不要使用 CSS 將該圖片設為背景圖片。
規則六：盡量避免使用文字圖像
有些人會為了網頁的美觀把文字做成圖片，其實這不是很好的做法，因為文字圖像無法像正常文字一樣可以調整大小，如果放大頁面，文字圖像變得模糊，縮小頁面，文字圖像又無法辨認，如果您確實需要使用文字圖像，那還必需將圖像內的文字放入圖片的替代文字，畢竟，這是圖片所要呈現的資訊。
當然，本文所討論的幾個原則，無法涵蓋所有的實際狀況，但下次在為圖片添加替代文字時不妨先想想：
如果拿掉圖片，使用者會看到什麼 ?
相信您就能為每張圖片提供最佳的替代文字。