無障礙網頁的圖片 alt（替代文字）怎麼寫？3步教你快速符合標準

依據政府無障礙網頁規範的要求，所有承載重要資訊的圖片，都必須加上適當的alt替代文字。這不僅是為了符合規範，更是為了讓有視覺障礙而使用螢幕閱讀器的人，能夠獲取與一般使用者相同的網頁內容資訊。

 

不用擔心，填寫alt其實很簡單，這篇文章將以最容易理解的方法，教你用三個步驟快速完成圖片alt替代文字的填寫，協助網站順利符合無障礙標準。即使是剛接手網站後台的你，也能輕鬆上手！

 

參考資料：H101000 圖片需要加上替代文字說明

 

 

什麼是圖片 alt（替代文字）？

網頁圖片本身是一種「視覺資訊」，讓我們可以透過圖片的輔助而理解網頁內容，但對於有視覺障礙而使用螢幕閱讀器的人來說，圖片是無法直接辨識的內容。因此，無障礙網頁規範要求，每張重要資訊性的圖片都必須加上「alt替代文字」。

 

所謂alt（替代文字），就是當圖片無法被觀看時，用來描述圖片內容的一段簡短文字，這段文字可以被螢幕閱讀器讀出，讓有視覺障礙的使用者也能了解圖片傳達的意義。

 

簡單來說，alt文字就是為圖片加上文字說明，讓每個人都能接收到圖片中的完整資訊。

 

【👉 小提醒】

• 資訊性圖片：如公告海報、活動合照、功能按鈕等，必須填寫alt文字。
• 純裝飾圖片：如分隔線、背景花紋，則可以設定為空白alt（alt=""），表示這張圖片不承載資訊，讓輔助科技可以自動略過。

 

延伸閱讀：HTML Image Alt 重要嗎？善用 AltText（替代文字）讓爬蟲輕鬆看懂你的圖片！

 

 

圖片 alt 替代文字怎麼寫？3大重點報你知

圖片的alt替代文字，其實不需要寫得很複雜，開始前你只要先理解一個簡單原則：

 

👉 想像如果看不到圖片，要怎麼用一句話說明這張圖片的重點？

 

1. 直接描述圖片的主要內容

• 不要加上「圖片」、「照片」這類多餘的詞，直接描述畫面中的重點即可。
• 正確寫法✅：alt="學生在操場參加校園運動會"
• 錯誤寫法❌：alt="活動照片"

 

2. 簡潔明確

• 文字長度大約10到20字左右最合適。
• 避免太短（例如只寫「活動」），也不要太長。

 

3. 用自然的敘述方式

• 就像跟人對話一樣，讓聽到的人可以立即理解圖片的重點即可。

 

✅ 提供一些實際範例給你參考：

 

圖片內容	錯誤寫法	正確寫法
校園運動會合照	運動會照片	學生在操場參加校園運動會
公告海報	公告圖	112年度社團活動招募公告
頁面按鈕	按鈕圖片	點選後進入報名頁面
主題演講活動	活動照片	主講人於研討會現場演說

 

 

4. 小技巧：用ChatGPT協助生成alt文字

相信很多人看到圖片一時之間可能會腦袋一片空白，不知道該怎麼寫替代文字，這時也可以請ChatGPT協助！

 

步驟如下：

1. 在ChatGPT輸入指令，例如：「幫我為這張圖片撰寫符合無障礙網頁要求的alt替代文字，畫面有OOO，字數約10~20字」。
2. 在OOO以你對圖片內容的想法簡單描述出來即可。
3. ChatGPT會根據你的描述，產生適合的alt文字建議。

 

範例：

你可以這樣下指令：「請幫我為一張圖片，撰寫適合的alt替代文字，畫面是校園運動會上學生們排隊等待起跑，字數約10~20字。」

ChatGPT生成建議：alt="學生們在校園運動會起跑線前整隊準備比賽"

 

這樣，即使對照片內容沒太多想法，也能快速產出符合要求的替代文字。

 

還是不太知道怎麼寫alt替代文字嗎？我們提供一個「無障礙網頁alt替代文字小幫手」讓你可以透過AI的協助來完成這件事。

 

小工具請點我：無障礙網頁alt替代文字小幫手

 

 

 

如何在網站後台填寫圖片 alt？ 3步驟輕鬆完成

在網站後台使用圖文編輯器時，填寫圖片的alt替代文字其實很簡單，只需要以下3個步驟：

 

第一步：選取圖片並打開圖片屬性設定

• 在文章編輯畫面中，找到你想要編輯alt文字的圖片。
• 用滑鼠點一下圖片，圖片會變成藍色框線選取狀態。
• 然後，按一下滑鼠右鍵，在跳出來的選單中選擇「插入/編輯圖片」。

 

圖解做法：插入圖片或在已有的圖片上，按下「右鍵」，點選「插入/編輯圖片」。

 

 

第二步：填寫「替代文字」欄位

• 當「圖片管理員」視窗跳出後，在上方可以看到一個欄位叫做「替代文字」。
• 在這個欄位中，輸入剛剛根據圖片內容撰寫好的alt替代文字。
• 如果圖片是活動海報，可以填寫：「112年度校園科展比賽活動公告」。
• 如果是得獎合照，可以填寫：「學生獲頒校內創意設計競賽金牌獎」。

 

圖解做法：跳出「圖片管理員」後，找到「替代文字」的填寫位置，填上你要的替代文字就可以。

 

 

第三步：儲存更新

• 確認替代文字已經填寫完成後，點選右下角的「更新」按鈕。
• 最後再按一下文章上方的「儲存」按鈕，確保更新到網頁上。

 

完成以上三個步驟，你就可以成功幫圖片加上符合無障礙規範的alt替代文字了！

這個操作過程非常簡單，只要做過一次，之後每次上傳圖片時，都可以快速完成設定，讓網站在無障礙檢測中順利過關。

 

 

圖片替代文字(ALT)的常見錯誤

在實際操作過程中，有一些常見的錯誤，容易讓圖片的alt替代文字不符合無障礙標準，以下列出來提醒你注意：

 

❌ 常見錯誤

• 忘記填寫alt文字：網站系統會自動抓圖片檔名（通常是亂碼或無意義文字），不符合無障礙規範。
• 只寫「圖片」、「照片」這種模糊的詞：例：alt="活動圖片"，因為沒有描述清楚圖片內容。
• 填寫無意義的文字或關鍵字堆砌：例：alt="得獎 校慶 國立大學 活動 照片 比賽"，這樣會影響無障礙檢測，也對使用者沒有幫助，建議可以把這些關鍵字丟給ChatGPT，讓它幫你重寫。
• 填寫過長、像文章一樣的描述：alt文字應簡短明確，不需要寫成完整段落或故事。

 

✅ 正確做法

• 每一張重要資訊圖片都要確實填寫alt文字。
• 內容要能清楚描述圖片的重點，15～20字內最為合適。
• 自然敘述，不要刻意堆疊關鍵字或使用過於艱澀的詞。
• 純裝飾性圖片，則可以設定空白alt（輸入alt=""），讓輔助工具自動略過。

 

【👉 小提醒】

如果不確定寫得好不好，可以自己試著讀一次alt文字，看看光靠這段文字，是否能大致了解圖片的意思？如果可以，就是一個合格的替代文字。

 

 

完成檢查

圖片的alt替代文字填寫完成後，最後一步就是自我檢查，確保每張重要圖片都有正確設定，避免因為漏填或填錯，影響網站的無障礙檢測結果。

 

1. 回到網站後台文章編輯畫面。
2. 用滑鼠點選圖片，用右鍵打開「插入/編輯圖片」視窗。
3. 確認「替代文字」欄位是否有填寫，且內容是否符合圖片意義。
   
   

👉 如果欄位是空白的，或內容很奇怪（如只有檔名或無意義的文字），記得要馬上補上或修改。

 

 

從填寫alt開始，打造無障礙網站

圖片alt替代文字的填寫，看起來只是幾個小小的步驟，卻是確保網站符合無障礙網頁標準的重要關鍵。

只要簡單三步驟，就能讓你的網站內容，對所有使用者—包含有視覺障礙而使用螢幕閱讀器的人—都同樣友善、易於理解。這不僅符合政府單位對資訊公開與平權的要求，也展現了單位對社會責任的重視。

 

同時，良好的alt文字設計，也能讓網站在搜尋引擎上有更好的表現，進一步提升網站的可見度。

 

從現在開始，養成每次上傳圖片時，就順手填寫alt替代文字的好習慣，
你就能讓自己的網站變得更完善、更專業！