圖片alt怎麼寫？先分清封面、操作圖與連結圖

替網站圖片填alt時，寫「圖片」沒有幫助，把模板名稱與關鍵詞塞滿也不會變得清楚。先問：看不到這張圖的人，需要知道什麼，才能理解這一段或完成操作？同一張圖放在不同位置，答案可能不同。

封面先說主題，不必抄完畫面文字

假設文章封面是在說明手機與桌機選擇不同圖片尺寸，alt可寫「桌機與手機選用不同尺寸圖片的示意」。不必再列每一個圖案、顏色和裝飾線條。如果封面緊挨著同樣意思的完整標題、純粹作裝飾，可依實際上下文考慮空alt，避免重複朗讀；正文裡唯一的重要資訊則不能這樣省略。

<img src="responsive-cover.webp"
     alt="桌機與手機選用不同尺寸圖片的示意">

操作圖補上讀者要判斷的結果

操作畫面不是寫「後台截圖」就夠。若段落要教人找發布狀態，alt可指出畫面裡重要的狀態；詳細步驟仍留在文字裡，不能只放進圖片讓讀者自己猜。

<img src="status-step.webp"
     alt="文章狀態欄顯示草稿，尚未公開">

把狀態文字換成你圖片裡實際顯示的結果，並與圖說和段落保持一致。圖內字太小時，先修圖片或補可選取文字，不靠更長的alt掩蓋看不清楚。

圖片是連結時，說清點擊用途

如果圖片是連結中唯一能表達動作的內容，替代文字應讓人知道會去哪裡。例如：

<a href="/contact/">
  <img src="contact-icon.webp" alt="前往聯絡頁面">
</a>

將網址換成你網站現有的聯絡頁，再確認點擊能到達正確位置。如果連結裡已經有「聯絡我們」文字，旁邊只是相同意思的裝飾圖示，圖片可用alt=""，讓連結文字負責說明動作。空alt與完全漏掉alt是不同做法。

填完後，連著前後文讀一次

先判斷圖片是資訊、裝飾還是操作入口，再讀周圍標題與段落，刪掉重複內容。alt不需要塞「最佳」「推薦」或無關熱門字；描述正確用途，比把整張圖逐字翻成長段落更有用。改既有媒體前也要確認它是否用在其他頁面，避免一處合適的alt覆蓋另一處不同用途。

參考資料

資料核對：2026年10月4日。文件與瀏覽器行為可能更新。