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

English version: [https://accesserty.com/en/ai/guides/writing-meaningful-alt-text.md](https://accesserty.com/en/ai/guides/writing-meaningful-alt-text.md)

Page version: [https://accesserty.com/guides/writing-meaningful-alt-text/](https://accesserty.com/guides/writing-meaningful-alt-text/)

Last updated: 2026-10-03

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

## 重點整理

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

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

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

## 常見寫法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

## 接下來可以做什麼

- [網頁上線前，色彩對比要檢查哪些狀態？](<https://accesserty.com/guides/color-contrast-checks-before-release/>) — 檢查文字、焦點、錯誤與選取狀態；區分必要的圖示／邊界、裝飾，以及真正停用元件的例外。

- [網站無障礙修復計畫](<https://accesserty.com/guides/web-accessibility-remediation-plan/>) — 依使用者任務、影響範圍、負責角色、修復層級與回測方式整理下一步。

## 延伸閱讀

- [Accesserty DevCheck](<https://accesserty.com/devcheck/>) — 用瀏覽器內工具檢查本機、測試站、登入後頁面與互動狀態。

- [使用 AI 前，先確認資料會送到哪裡](<https://accesserty.com/data-handling/>)

- [圖片替代文字術語頁](<https://accesserty.com/glossary/alt-text/>)

- [W3C WAI 功能性圖片範例](<https://www.w3.org/WAI/tutorials/images/functional/>)

- [網站上線前無障礙檢測指南](<https://accesserty.com/guides/accessibility-testing-before-launch/>)

- [自動化檢測限制指南](<https://accesserty.com/guides/automated-accessibility-checks-limits/>)

- [網站無障礙檢測工具](<https://accesserty.com/web-accessibility-checker/>) — 針對實際頁面、登入後狀態與互動狀態做初步無障礙檢查。

- [看懂 WCAG 檢測結果](<https://accesserty.com/wcag-compliance-tool/>) — 檢視 WCAG A/AA 相關問題、嚴重程度、受影響元素與修正線索。

- [無障礙實作與維護指南](<https://accesserty.com/guides/>) — 依實際任務瀏覽公開訊號、上線前檢查、上線後維護與標準限制指南。