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

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

這個例子使用了二個圖示 ( 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=”” 可能還是比較適合的做法。

一張圖片應該歸屬資訊性還是裝飾性 ? 完全視作者或網頁設計人員依圖片的用途及前後文的關係自行判斷，這沒有一定的標準。如果您認為還需要再透過圖片補充一些內容，那就在 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 的圖片就相當於文字的網站名稱 ( 亮怡資訊官網 )，但此處是連結到網站的首頁，除了網站名稱外，應該再加上「首頁」，故圖片的替代文字「亮怡資訊官網首頁」會比「亮怡資訊官網」為佳 ( 此為 W3C 的建議 )。

網頁效果：

<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>

範例四：在按鈕中使用 icon 圖片

下面範例中的圖片為按鈕提供不同的樣式，它是啟動搜尋請求的按鈕，並且使用放大鏡的圖示 ( icon )，因此圖片的替代文字為「搜尋」 (或類似的文字敘述)，用來傳達按鈕的用途。

<label for="search">關鍵字：</label>
<input type="text" name="search" id="search" title="請輸入關鍵字">
<label for="submit" class="display_none">搜尋</label>  <!-- 這行是為了通過 freego 2.0 機器檢驗才需要加的 -->
<input type="image" name="submit" id="submit" src="searchbutton.png" alt="搜尋" title="開始搜尋">

文字圖片是將文字內容放在圖片當中，對於大多數的瀏覽器而言，透過 CSS 樣式設定的真實文字，會比文字圖片更能夠靈活應用，包括：可以調整大小而不會失去清晰度；可以隨時修改背景和文字顏色以適應網頁和使用者的偏好。文字圖片則不然，放大圖片時文字內容會變得模糊；縮小圖片時，文字圖片的內容又不易辨認。其實，只要把文字放入圖片中，在絕大多數的情況下，這張圖片就變成資訊性圖片，在必需使用文字圖片的少數情況下，替代文字必需包含圖片中所有顯示的文字。

至於像產品介紹之類的電子型錄 ( E-DM )，請勿直接將圖片貼在網頁上，最好另外製作或轉換成 PDF 檔案，否則就得使用圖片的 longdesc 屬性，將圖片內容完整的以文字方式表達出來。

範例：經過視覺設計的宣傳標語

下圖是一張經過美術設計的宣傳標語，該圖片的替代文字應與圖片中傳達的標語相同：「簡報藝術烘焙坊」，至於標語所使用的特殊字體和裝飾效果不需要被描述，因為它們不相關。

( 範例中的圖片截取自網路，若有任何涉及侵權行為敬請告知，以便立即撤除 )

<img src="slogan.png" alt="簡報藝術烘焙坊" />

所謂的圖片組，是指用一組圖片來共同表達一項訊息，例如以若干個星星圖示 ( icon ) 來表達評比的分數，或是某班級同學在大隊接力競賽項目中的活動花絮。在這種情況下，只有第一張圖片需要用替代文字來描述整個訊息內容，其他的圖片則設定空的 alt 屬性 (alt=””)，以便於像 screen reader 這類的輔助技術忽略它們。