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

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

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

重點摘要

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

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

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

常見寫法

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

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

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

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

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

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

下一步檢查

這篇文章是 DevCheck 上線前檢查路徑的一部分。完成目前檢查後，可以接著看下列任務。

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

    色彩對比檢查：Release 前不只看主色

    檢查文字、焦點、錯誤、hover、disabled、圖示與元件邊界等真實狀態。

  2. 如果有 PDF，檢查結構訊號

    PDF 無障礙結構訊號檢查

    檢查語言、標籤、圖片、連結、表單、書籤與頁面一致性等線索。

相關頁面