先說結論
嗯...今天要來聊聊 alt tag，就是圖片替代文字。老實說，這東西很多人聽過，但真的寫對的，可能沒那麼多。
簡單講，alt tag 就是一張圖片的「文字說明」。它有兩個主要用途：第一，是給那些因為各種原因（網路慢、圖片壞掉、或是視力障礙）看不到圖片的人「聽」的，讓他們知道這張圖大概是什麼。第二，是給 Google 這種搜尋引擎「看」的，幫助它理解圖片內容，這對圖片 SEO 很重要。
所以，寫得好不好，不只是技術問題，更像是一種...嗯，體貼吧。對使用者和對搜尋引擎的體貼。
alt tag 不是你想的那樣，重點是「情境」
很多人以為寫 alt 就是看圖說故事，其實不完全對。同一張圖片，在不同文章、不同段落裡，它的 alt tag 可能完全不一樣。
我想想...怎麼說比較好。舉個例子好了。
假設我們有一張「一個人在咖啡廳用筆電」的照片。
- 如果這張圖用在一篇介紹「遠距工作」的文章裡，alt 可能會寫：`alt="一名自由工作者在咖啡廳使用筆電遠距辦公"`。這裡強調的是「工作」這個情境。
- 但如果同一張圖，是用在一篇評測這台筆電的文章裡，alt 就可能變成：`alt="MacBook Pro 在咖啡廳的自然光下顯示其螢幕抗反光效果"`。這時候，重點就變成「筆電本身」的特色。
- 又或者，這是在這家咖啡廳的官網上，那 alt 可能會是：`alt="顧客在我們店內享受午後的悠閒時光與免費 Wi-Fi"`。重點又變成「店內氛圍」。
你看，都是同一張圖，但因為文章想傳達的「意圖」不同，alt tag 的寫法就得跟著變。所以，寫之前先問自己：這張圖在這篇文章裡，扮演什麼角色？它想輔助說明的點是什麼？這比單純描述畫面還重要。
怎麼寫？一個簡單的思考流程
好吧，道理說完了，那實際要怎麼動手？我通常會跟著下面這個流程想，還沒真的變成反射動作之前，這樣比較不會漏掉。
第一步，先判斷圖片的「類型」。這張圖是傳達資訊的？還是純粹裝飾用的？
- 資訊型圖片：像是產品照、圖表、教學截圖、新聞照片。這種就一定要寫替代文字。
- 裝飾性圖片：比如頁面背景、花紋、分隔線。這種圖片如果沒有傳達任何實質資訊，alt 應該要留空，寫成 `alt=""`。 留空跟不寫 alt 屬性是兩回事喔，留空是告訴螢幕閱讀器「這裡有張圖，但它不重要，你可以跳過」，但不寫的話，有些閱讀器可能會去唸檔案名稱，那體驗就很糟。
- 功能性圖片：例如一個放大鏡圖示的「搜尋」按鈕。它的 alt 就不該寫「放大鏡」，而是要寫「搜尋」。描述它的「功能」，而不是外觀。
第二步，如果是資訊型圖片，開始描述。我會想像自己正在跟一個朋友通電話，他看不到我的螢幕，我要跟他描述這張圖。這個方法蠻有用的。
描述時有幾個小原則：
- 要具體，但不用囉唆：「一隻狗在公園玩球」就不錯。但如果能更具體，「一隻黃金獵犬在草地上追逐一顆紅色網球」，那就更好。 但也不用寫到「一隻毛茸茸的黃金獵犬在一個陽光普照的午後，於碧綠的草地上奮力追逐一顆被口水沾濕的紅色網球」，那就太多了。長度建議在 125 個字元內，雖然不是硬性規定，但是個好習慣。
- 自然地放入關鍵字：如果文章關鍵字是「幼犬訓練」，那 alt 寫成「一隻黃金獵犬幼犬正在進行『你丟我撿』的訓練」，就很自然。但千萬不要硬塞，變成「黃金獵犬 幼犬 訓練 你丟我撿 狗 公園」，這種關鍵字填充會被 Google 討厭。
- 不用加「...的圖片」或「...的照片」：螢幕閱讀器自己就會宣告這是一個圖片了，所以不用多此一舉。 直接描述內容就好。
常見的錯誤，看看你有沒有中
這部分，老實說我自己以前也常犯。
- 完全不寫：最常見的錯誤。上傳了圖片就忘了，很多 CMS (內容管理系統) 就會抓檔名當 alt，結果就變成 `alt="IMG_8787.jpg"`，這對誰都沒有幫助。
- 所有圖片都用同一個 alt：比如一篇文章裡有五張介紹同一個產品不同角度的照片，結果 alt 全都寫「產品A」。這樣不行，應該要分別描述「產品A的正面照」、「產品A的側面連接埠特寫」等等。
- 把 alt 當成 title 屬性來用：`alt` 是在圖片無法顯示時出現的替代文字，`title` 則是滑鼠移上去會跳出來的提示小框框。兩者用途不同，不要搞混了。 Google 主要看的是 `alt`。
- 只為 SEO 寫，不為真人想：這會導致關鍵字堆砌，語句不通順。記得，首要服務對象永遠是「人」。 無障礙體驗做好了，SEO 通常也不會太差。這也是為什麼 WCAG (網頁內容無障礙指南) 和台灣的「無障礙網頁開發規範」都這麼強調這點。
說到這個，國外的 WCAG 指引跟台灣的規範，在大方向上是一致的，都強調要為非文字內容提供替代文字。 不過台灣的規範會用更明確的檢測碼（例如 H101000 圖片需要加上替代文字說明）來條列，這對於政府機關或是一些需要通過認證的網站來說， checklist 的形式可能更容易遵循。 但精神都是一樣的：讓資訊平等地傳達給每一個人。
不同類型的圖片，寫法策略也不同
我們把幾種常見的圖片類型整理成一個表，這樣可能更清楚。
| 圖片類型 | 寫法策略 | 好例子 | 嗯...可以更好的例子 |
|---|---|---|---|
| 產品照片 | 描述產品，可以帶上型號、顏色、角度。如果上下文有關，可以提一下使用情境。 | alt="白色的 iPhone 15 Pro，展示其鈦金屬邊框" |
alt="手機" |
| 人物照片 | 說明是誰、在做什麼。如果人物不重要，就描述場景。 | alt="團隊成員們在年度會議上開心合照" |
alt="團體照" |
| 圖表 / Infographic | 這比較複雜。Alt 應該要總結圖表的核心結論。然後，最好在圖片旁邊的內文中，提供完整的圖表資訊。光靠 alt 可能說不清楚。 | alt="長條圖顯示2025年第一季的銷售額比去年同期增長了15%" |
alt="長條圖" |
| 裝飾性圖片 | 例如背景圖案、分隔線。這些不提供資訊，alt 應該設為空，讓輔助工具忽略它。 | alt="" |
alt="藍色波浪分隔線" (這會干擾聽取主要內容的人) |
| 功能性圖片 (如按鈕) | 描述圖片的功能，而不是它的長相。 | alt="搜尋本站文章" (如果是一個放大鏡圖示的搜尋按鈕) |
alt="放大鏡" |
所以，下次該怎麼做？
其實，不用想得太複雜。下次你在網站後台上傳一張圖片時，在填寫 `alt` 欄位前，花個十秒鐘想一下：
如果我看不到這張圖，我會希望別人怎麼告訴我這是什麼？
就這樣。只要抱持著這個想法去寫，基本上就不會錯得太離譜。把這件事當成是內容創作的一部分，而不是一個額外的技術負擔，心態上會輕鬆很多。說到底，不管是為了 SEO 還是為了無障礙，我們都是在努力讓資訊的傳遞更順暢而已。
希望這樣拆解完，有讓 `alt` tag 這件事變得更簡單一點。
對了，給你一個小練習：如果文章裡有一張台北101跨年煙火的照片，你會怎麼寫它的 alt tag 呢？可以在下面留言分享你的想法。
