跳至主要內容區
:::
鍵盤操作說明

圖片替代文字詳解- 無障礙網頁設計

請以左、右方向鍵切換「資訊性圖片、裝飾性圖片、功能性圖片、文字圖片、圖片組」之頁籤

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

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

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

網頁效果:

聯絡電話: (01) 2345-6789

傳真號碼: (01) 2345-6789

網頁語法:

<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=”” ,讓圖片僅僅是裝飾之用。

網頁效果:

讓顧客 100% 滿意是我們的首要任務,透過產品滿意保證和快速的服務,我們承諾您將會獲得最優質的客戶服務品質。

網頁語法:

<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 這類的輔助技術忽略它們。

Top
改變字體大小
調整背景顏色