跳至中央內容區塊 :::
:::

如何寫出有意義的圖片替代文字？

好的圖片替代文字不是把畫面全部描述出來，而是根據頁面脈絡傳達使用者完成任務所需要的資訊。

最後更新:

重點摘要

  • 先判斷圖片是裝飾、資訊、操作入口、商品、圖表還是文字圖片。
  • 替代文字要補足使用者看不到圖片時會失去的資訊。
  • AI 可以產生草稿，但人仍要確認脈絡、精準度與語氣。

先看圖片用途，不是先描述畫面

同一張圖在不同頁面可能需要不同寫法。品牌裝飾圖可能不需要讀出；商品圖需要說明款式、顏色或狀態；圖表則可能需要摘要趨勢與關鍵數值。

常見寫法

可以用下面的分類快速決定替代文字方向。

  • 裝飾圖片：通常使用空替代文字，避免干擾。
  • 資訊圖片：補上圖片提供的必要資訊。
  • 連結或按鈕內圖片：若圖片提供唯一名稱，替代文字要說明操作目的；已有等義可見文字時，避免重複。
  • 商品圖片：說明會影響選擇的外觀、狀態或差異。
  • 圖表：摘要結論，必要時提供附近的資料表或完整文字說明。

同一張 Logo：圖片本身就是首頁連結

以本網站的 Logo 為例。當圖片是連結中唯一的內容，讀者需要知道它會前往哪裡，而不是只聽到「黑色 Logo」。以下是網站內的 HTML 片段；用於自己的網站時，請替換圖片路徑、站名與首頁網址。

<a href="/">
  <img src="/images/logo.svg" width="160"
    alt="Accesserty 首頁">
</a>

預期連結名稱是「Accesserty 首頁」。這裡不能只用 alt=""，否則唯一的內容就不再提供連結名稱。名稱存在之後，仍須確認網址真的前往首頁。

同一張 Logo：旁邊已有相同連結文字

當同一個連結裡已有「Accesserty 首頁」文字，Logo 沒有再補充其他資訊，就可以使用空替代文字，避免重複命名。空 alt 不等於漏寫 alt；也不要為了消除掃描提示，把所有圖片一律設成空字串。

<a href="/">
  <img src="/images/logo.svg" width="160" alt="">
  Accesserty 首頁
</a>

預期連結名稱仍是「Accesserty 首頁」，這次由可見文字提供。檢查整個連結的名稱，不只看圖片的 alt 欄位；再用實際螢幕閱讀器確認操作時不會重複或失去目的。

使用 AI 建議時要檢查什麼？

DevCheck 可以協助產生圖片替代文字建議，但 AI 不會完全知道這張圖在你的頁面中扮演什麼角色。採用前應確認：它是否說到重點、是否過度描述、是否漏掉操作目的、是否使用不適合品牌或使用者的語氣。

AI 是選用功能。主動啟動後，DevCheck 會將有限量的頁面文字、連結名稱與周邊文字，以及頁面允許讀取的選定圖片和名稱資訊送至 Google Gemini；不是只傳送你正在看的那張圖片。取樣內容中的網址不會自動遮蔽。請先確認頁面適合分享，不要送出機密、個人或未經授權的資訊；不啟用 AI 仍可在本機掃描及人工檢視。資料接收者與處理方式可見下方「使用 AI 前，先確認資料會送到哪裡」連結。

不要把替代文字寫成固定公式

替代文字沒有一個永遠正確的長度或格式。比較可靠的判斷是：如果使用者看不到圖片，會失去什麼完成任務所需的資訊？如果答案是「沒有」，圖片可能是裝飾；如果答案是「商品差異、操作目的、圖表結論或重要文字」，替代文字就應補上那個缺口。

下一步檢查

依頁面內容選擇適用的下一步。有 PDF 才需要另外檢查文件；完成修正後仍要重測。

  1. 檢查色彩、狀態與可讀性

    網頁上線前，色彩對比要檢查哪些狀態？

    檢查文字、焦點、錯誤與選取狀態；區分必要的圖示／邊界、裝飾，以及真正停用元件的例外。

  2. 把發現整理成修復計畫

    網站無障礙修復計畫

    依使用者任務、影響範圍、負責角色、修復層級與回測方式整理下一步。

相關頁面