2026 年圖片替代文字的務實指南

為什麼替代文字仍然重要

替代文字自 1995 年起就是 HTML 規格的一部分。三十年後，網路上的多數圖片仍然不是沒有 alt 屬性，就是替代文字讀起來像是由從未使用過螢幕閱讀器的人撰寫的。

問題已經不再是缺乏意識。多數內容管理系統現在都會將 alt 欄位設為必填。問題在於，替代文字已經從溝通工具變成合規打勾項目。人們會寫「一個人在微笑的圖片」，但實際情境是「執行長公布第四季財報」。

替代文字只有一個目的：向看不見圖片的人傳達圖片的用途。這個用途會依情境而改變。同一張咖啡杯照片，放在咖啡館首頁上的功能，和放在一篇關於陶瓷釉燒技術的部落格文章中並不相同。

到了 2026 年，我們也有能自動產生替代文字的 AI 工具。這些工具正在變得更好，但它們仍然不理解情境。它們描述的是看見了什麼，而不是圖片為什麼出現在那裡。

決策樹：這張圖片需要替代文字嗎？

不是每張圖片都需要描述性的替代文字。有些圖片只是裝飾。有些是重複資訊。有些更適合用圖說或周圍文字來處理。

以下是判斷流程：

這張圖片是否傳達了周圍文字沒有提供的資訊？ 如果是，它需要替代文字。如果不是，它很可能是裝飾性圖片。

如果這張圖片消失，視障使用者是否會錯過重要內容？ 如果是，請撰寫替代文字。如果不是，請使用空的 alt 屬性（alt=""）告訴螢幕閱讀器略過它。

這張圖片是連結或按鈕嗎？ 替代文字會成為連結文字。描述目的地，而不是圖片本身。「查看價格方案」比「箭頭圖示」更好。

這張圖片很複雜嗎——例如圖表、示意圖或資訊圖？ 替代文字有實務上的長度限制（約 125 個字元對多數螢幕閱讀器來說較舒適）。複雜圖片需要較長的描述，可以放在圖說、正文，或透過 aria-describedby 提供。

好的替代文字實際上是什麼樣子

好的替代文字具體、簡潔，並且理解情境。它回答的是這個問題：這張圖片為什麼在這裡？

不好：「一張圖表的圖片」

較好：「折線圖顯示 2026 年 1 月至 3 月行動流量增加 23%」

不好：「一個人在使用筆電」

較好：「設計師在 Figma 中檢視網站 mockups」

不好：「點擊這裡」

較好：「下載完整的無障礙稽核清單（PDF）」

請注意，好的替代文字通常包含數字、動作或結果。它不會描述每一個視覺細節，而是描述真正重要的內容。

對於裝飾性圖片——主視覺背景紋理、裝飾邊框、純粹美觀用途的插圖——請使用 alt=""。這不是偷懶，而是語意上的誠實。螢幕閱讀器會完全略過該圖片，這正是你想要的結果。

浪費所有人時間的常見錯誤

以「……的圖片」或「……的照片」開頭：螢幕閱讀器本來就會宣告這是一張圖片。直接進入描述即可。

為了 SEO 堆砌關鍵字：替代文字不是用來塞入「布魯克林最佳有機咖啡豆職人烘焙」的地方。Google 的圖片搜尋多年來已經很擅長偵測這類做法。請為人而寫。

描述檔案名稱：「IMG_3847.jpg」對任何人都沒有幫助。「hero-banner-final-v3」也一樣。

寫成一篇小說：如果你的替代文字超過兩句話，這些資訊很可能應該放在圖說或正文中。

重複相鄰文字：如果標題寫著「如何烘焙酸種麵包」，而圖片顯示某人在整形麵糰，替代文字不需要重複標題。請描述視覺上不同的內容：「雙手在撒了麵粉的檯面上摺疊酸種麵糰。」

真正有幫助的工具與工作流程

多數現代 CMS 現在都內建替代文字欄位。WordPress、Webflow、Contentful 和 Sanity 都會在上傳時明確顯示 alt 屬性。欄位看得見，不代表內容就會填得好。

如果你正在稽核網站是否有遺漏或品質不佳的替代文字，像 Accessibility Insights 或 axe DevTools 這類瀏覽器擴充功能，可以標示沒有 alt 屬性的圖片。若要快速手動檢查，可以在瀏覽器中關閉圖片（Firefox 和 Chrome 都支援），然後閱讀頁面。如果替代文字在情境中合理，你的方向就沒有問題。

AI 產生的替代文字——可透過 Azure Computer Vision、Google Cloud Vision 等工具取得，或內建於 Cloudflare Images 等平台——可以是合理的起點，尤其是對大型圖片庫而言。但請把 AI 替代文字視為初稿。它會準確描述圖片內容，卻不會知道圖片為什麼在頁面上。仍然需要人類編輯加入情境。

如果你的網站大量使用圖片，並且希望及早發現效能問題，像 Wux Webtools' Image Compressor 這樣的工具可以協助你在上傳前最佳化檔案大小——因為只有圖片真的載入時，替代文字才有用。

2026 年的替代文字與 SEO

Google 多年來都表示，替代文字是圖片搜尋的排名因素。這一點仍然成立。但圖片搜尋最佳化和無障礙並不是同一件事。

如果你主要為了 SEO 撰寫替代文字，最後會得到塞滿關鍵字、毫無意義的內容，反而讓螢幕閱讀器使用者更難瀏覽頁面。如果你先為無障礙撰寫替代文字，SEO 效益會自然跟上，因為描述清楚、具備情境的替代文字，正是 Google 圖片搜尋演算法試圖呈現的內容。

有一個細節：Google Images 現在比過去更重視周圍頁面內容。如果你的替代文字很好但較通用（「有糖霜的巧克力蛋糕」），而頁面主題是純素烘焙，Google 會理解這個情境。除非這個差異在圖片中視覺上很明顯，否則你不需要寫「有無乳製品糖霜的純素巧克力蛋糕」。

重點整理

• 替代文字的目的在於傳達圖片的用途，而不是描述每一個視覺細節
• 裝飾性圖片應使用 alt=""，讓螢幕閱讀器完全略過它們
• 好的替代文字具體、理解情境，並能回答「這張圖片為什麼在這裡？」
• AI 產生的替代文字是有用的起點，但仍需要人類依情境編輯
• 先為無障礙而寫；SEO 效益會自然來自清楚、具描述性的文字

FAQ

Q: 我可以只用 AI 產生所有替代文字嗎？

A: AI 工具很擅長描述圖片中有什麼，但它們不理解情境。如果你處理的是數百張產品圖片，而且需要一個基準，AI 替代文字可以接受。對於編輯內容、行銷頁面，或任何圖片存在的理由很重要的內容，仍需要人類審閱與編輯。

Q: 替代文字應該多長？

A: 多數螢幕閱讀器對 125 個字元以內的內容較容易處理。如果你需要更多文字，資訊很可能應該放在圖說、正文，或透過 aria-describedby 連結到較長的描述。技術上沒有硬性限制，但較長的替代文字會讓瀏覽變得不順。

Q: Logo 需要替代文字嗎？

A: 需要，但請保持簡單。如果你的 logo 位於頁首並連結到首頁，替代文字應該是你的公司名稱：alt="Acme Corp"。除非「這是一個 logo」這件事在情境中有某種相關性，否則不要寫 alt="Acme Corp logo"。

Q: 替代文字和圖說有什麼不同？

A: 替代文字是圖片的直接替代內容。螢幕閱讀器在遇到圖片時會讀出它。圖說則是補充資訊，所有人都看得到，用來加入情境或標示出處。如果兩者都有，它們不應該互相重複。

Q: 我應該為 CSS 中的背景圖片加入替代文字嗎？

A: 不需要。CSS 背景圖片依定義是裝飾性的，而且不會暴露給螢幕閱讀器。如果背景圖片傳達了重要資訊，它應該是 HTML 中的 <img> 元素，並具備適當的替代文字。

Sources

• W3C Web Accessibility Initiative: Images Tutorial
• WebAIM: Alternative Text
• Nielsen Norman Group: Alt Text for Images
• Google Search Central: Image SEO Best Practices