跳到主要內容
:::|

圖片替代文字:使用時機與方式

  • 點閱:33
  • 資料來源:本服務網
  • 日期:109-11-16

為方便活動宣傳或呈現辦理成果,網站管理者/小編經常要上稿發布文章、新增活動訊息,有時也因一時忽略或不諳無障礙設計要求,而使新增頁面無法通過無障礙檢測,以下彙整幾種圖片替代文字的使用時機與方式,上稿前可參考並適時調整您的網頁設計。

 

一、純圖片設計
可使用NVDA語音報讀軟體(NVDA下載路徑及操作說明)的單鍵瀏覽模式讀取網頁資訊,當選取至圖片項目時,語音將直接報讀alt屬性中的替代文字。因此以純圖片建立活動相簿時,建議可根據圖片中的內容,判斷以何種方式建立替代文字說明:

  1. 依據圖片中所包含的人/事/時/地/物,在各張圖片的alt屬性中,提供對應的替代文字
  2. 當網頁中提供的一組圖片相似度高,或僅取景的角度不同,而無法明確各別給予描述時,可將其視為系列圖片項目,僅在第一張圖片中提供說明(第二張後的圖片alt屬性皆為空值),但必須清楚說明圖片中的主要資訊,及各項圖片之間的關聯,方便視障者讀取及理解,例如:109年7月5日OO旗艦店開幕儀式蒞臨嘉賓合照,共5張。

 

二、燈箱或圖片物件
當使用語音報讀軟體選取至燈箱或圖片物件時,所報讀的語音資訊與一般圖片連結相當接近,容易使語音報讀軟體使用者產生混淆,因此以燈箱呈現圖片資訊時,較不適合採系列圖片方式處理,僅在第一張alt屬性提供描述的作法。

若使用燈箱設計(lightbox)或相簿套件等,含有超連結設計的圖片內容時,可適時在alt屬性中,以該系列活動描述加上編號方式,讓瀏覽者瞭解用途並區分不同項目。

 

三、建立完整的網頁資訊
建議精選上稿發布的照片,避免因過多重複的圖像資訊而不易提供文字說明,無論是以靜態純圖片或燈箱設計呈現網頁資訊,除應正確使用alt屬性為圖片添加替代文字外,更建議直接在網頁上提供詳細的活動描述,除能讓助使用者更加了解活動資訊,好的文案再配上精彩照片圖集,更能成功提升點閱率與互動。