「資訊性圖片」是利用圖形的方式傳達一個簡單的的概念或訊息，例如照片、圖片、或插圖。這類型圖片的替代文字應該是一些簡短的說明文字，用來傳達視覺上顯示的含義或內容。

範例一：用於標記其他訊息的圖片

這個例子使用了二個圖示 ( icon ) 圖片：一個是電話，另一個是傳真機，每張圖片後面都有電話號碼。因此與視覺呈現一致的使用「聯絡電話：」和「傳真號碼：」這兩個替代文字，來識別與每個電話號碼關聯的設備。

<p><img src="telephone.png" alt="聯絡電話：" />(01)2345-6789</p>
<p><img src="fax.png" alt="傳真號碼：" />(01)2345-6789</p>

範例二：傳達簡潔訊息的圖片

下列圖片說明了瓶蓋開啟的方法，因為鄰近沒有任何的文字說明，並且這些訊息可使用簡短的句子來描述，因此圖片的替代文字應為「將瓶蓋下壓，並逆時針旋轉」。

<img src="cap.jpg" alt="將瓶蓋下壓，並逆時針旋轉" />

範例三：用來傳遞文件格式的圖片

在下面的例子中，透過文字連結可以去下載一份文件，連結內的圖片主要在傳達檔案的格式，因此，這張圖片最適合的替代文字就應該是 alt=”PDF 檔案”。請注意，因為圖片是在連結 <a> 內，並提供了關於連結的附加訊息，所以它很重要，alt 當然就必需加上適當的說明。若圖片在連結 <a> 外面，那替代文字可能會不同。

<a href="…">
    下載就業申請表
    <img src="pdf.png" alt="PDF 檔案" />
</a>

裝飾性的圖片不會將訊息添加到網頁的內容中，圖片的存在只是為了讓文字內容更具有視覺吸引力，或是當相鄰文字已經具體提供了完整內容，圖片也不需要再補充任何說明，對於這類圖片，應提供一個空的替代文字 ( alt=”” )，以便 screen reader 可以忽略它們。如果沒有加上 alt=”” 屬性，有些 screen reader 會以圖檔的檔名當做替代文字。如有可能，最好使用 CSS 的 background-image 提供裝飾性的圖像。

範例一：用作網頁設計一部分的圖像

這是一張用來分隔上、下文的分隔線，因為圖片本身沒有傳達任何訊息，也不包含任何的連結 ( link )，因此使用空的替代文字 ( alt=””)。

<p>段落 (一) 的內容</p>
<img src="divider.png" alt="" />
<p>段落 (二) 的內容</p>

範例二：增加視覺吸引力的圖片

這個例子主要是舉例說明若前、後文已經提供完整的敘述，圖片本身也不提供額外有用的內容時，此張圖片就視為裝飾性圖片，替代文字應為 alt=””。

一張圖片應該歸屬資訊性還是裝飾性 ? 完全視作者或網頁設計人員依圖片的用途及前後文的關係自行判斷，這沒有一定的標準。如果您認為還需要再透過圖片補充一些內容，那就在 alt 加上一些簡明扼要的說明文字，此張圖片就成為資訊性圖片；如果您覺得不再需要透過圖片表達任何訊息，那就設定 alt=”” ，讓圖片僅僅是裝飾之用。

<img src="handshake.jpg" alt="" />

範例三：裝飾圖片作為文字連結的一部分

這在網頁設計中經常被使用，插圖只是為了讓連結更容易被識別，並且增加可點擊的區域，但不會增加相臨連結文字中已經提供的訊息 ( 用途類似範例二 )，在這種情況下，為圖片使用空的 alt。

請比較「資訊性圖片」的範例三，在那個範例中因為必需補充說明檔案格式，因此圖片的 alt 需要加上說明。

網頁效果：

向日葵

<a href="sunflower.html">
   <img src="sunflower.png" alt="" />
   <strong>向日葵</strong>
</a>

「功能性圖片」是用來啟動操作而不是傳達訊息，通常用於連結 ( <a> ) 或按鈕 ( <button> )，因此圖片的替代文字應該是傳達「將要啟動的動作」，而不是「對圖片的描述」。

功能性圖片對網頁內容的功能至關重要，缺少或空白的 alt 值，會給 screen reader 使用者帶來重大的問題。圖片如果少了 alt ，screen reader 通常會使用圖片的檔名或連結目標的 URL，這就非常容易誤導 screen reader 的使用者該圖片真正的目的，例如：一個「列印此頁」的印表機圖示 (icon)，如果少了 alt，screen reader 會認為這邊只有一個印表機圖示；看到一個放大鏡的圖示，screen reader 也不知道這其實就是要開始搜尋關鍵字的按鈕。

範例一：連結只包含 logo 圖片

下列圖片是連結到亮怡資訊官網首頁的唯一內容，圖片的替代文字就必需很明確的告訴使用者：點擊這張圖片後，會連結到哪個網頁 ? 因此圖片的替代文字應為「亮怡資訊官網首頁」。

附註：

• 依據 W3C 官網的說明，當做 logo 的圖片，可以免除圖片無障礙網頁設計規範的要求，亦即當做 logo 的圖片，沒有最小顏色對比度和文字大小的要求。
• 當做 logo 的圖片就相當於文字的網站名稱 ( 亮怡資訊官網 )，但此處是連結到網站的首頁，除了網站名稱外，應該再加上「首頁」，故圖片的替代文字為「亮怡資訊官網首頁」較佳。

網頁效果：

<a href="http://www.hischool.com.tw">
   <img src="netview.png" alt="亮怡資訊官網首頁" />
</a>

範例二：連結包含 logo 和文字

下面這個範例，引導至網站首頁的連結包含了 logo 以及後面的文字，但因圖片後方的文字敘述已完整傳達了連結的所有訊息 ( 連結到哪個頁面 )，圖片本身也未提供額外的功能性，因此圖片的替代文字應為 alt=””，以避免重複多餘的敘述。事實上，此例中的 logo 圖片只是裝飾性的視覺提示。

網頁效果：

亮怡資訊官網首頁

<a href="http://www.hischool.com.tw">
   <img src="netview.png" alt="" /> 亮怡資訊官網首頁
</a>

範例三：單獨使用具有功能性的 icon 圖片

下面是一個單獨存在的印表機 icon 圖片，提供列印本頁面的功能，就像前面提到的：圖片的替代文字要傳達「將要啟動的動作」，因此這張 icon 圖片的替代文字為「列印本頁」。

網頁效果：

<a href="javascript:print()">
   <img src="printer.png" alt="列印本頁" />
</a>