Elementor的Image元件已經顯示圖片，卻沒有替代文字時，先到媒體庫核對它選用的附件。圖片標題、檔名、圖說與Alt Text不是同一個欄位；把圖片名稱寫得很完整，也不代表前台img已經輸出alt。
下面用免費版的傳統Image示範：在媒體選擇視窗填寫Alt Text，再儲存頁面並開啟前台預覽。真正要確認的是預覽頁的img元素，不只是媒體庫裡看起來已保存的欄位。這樣才能分清附件資料、編輯畫布與訪客收到的HTML。
從元件找到正確的圖片附件
本例環境是WordPress 7.1.2、Elementor Free 4.3.3及Twenty Twenty-Five，使用傳統Container裡的Image。先選中該Image，在Content裡點圖片縮圖，開啟媒體選擇視窗。這個版本也有Atomic Elements，本文不把兩種元件的控制介面混在一起。
媒體庫裡可能有多張外觀看起來相同的圖，例如原圖、重新上傳的副本或另一個檔名的版本。先看選中項目的檔名和附件資料，確認就是頁面使用的那張圖。若你改的是另一個附件，即使Alt Text儲存成功，目前Image也不一定會讀到它。
這次使用獨立測試附件40，來源是一張尺寸測試圖，沒有改其他測試頁使用的附件。附件編號只用來追蹤本例，並不是你網站要照填的值。實際操作時，應以自己元件選中的媒體為準，不要照著文章的編號去找圖片。
替代文字描述用途，不是替檔案取名
在媒體視窗的附件資料找到Alt Text欄位，填入適合這張圖用途的描述。本例為了清楚辨認輸出，使用Author isolated resolution test pattern。這是測試圖的辨識文字；正式頁面應改成讀者需要知道的內容，而不是保留測試字串。
不要把Title、Caption或Description當成Alt Text的代替品。圖說可以顯示在圖片下方，附件標題可用來整理素材，但它們不會因為文字相同，就自動變成img的alt屬性。也不要用一長串服務名稱或地區關鍵字，取代圖片本來要傳達的資訊。
同一張圖在不同文章裡可能有不同用途。圖片若提供重要資訊，替代文字應能傳達那份資訊；若只是裝飾，則要依頁面情境評估空alt。不能只因為所有圖片都能填Alt Text，就對每張圖貼上同一句宣傳文案。
儲存後看前台，不只看編輯畫布
填好資料並選回圖片後，本例編輯畫布中的img仍讀到alt空值。這個即時結果不能直接證明正式輸出失敗，也不能因為媒體欄位有字就直接認定完成。我們接著用Save Draft儲存，再重新開啟具有登入權限的本地草稿預覽。
在儲存後預覽裡，同一個Image的img輸出alt=”Author isolated resolution test pattern”。它的圖片網址使用1024×683尺寸版本，而編輯畫布先前使用原圖網址；兩者都要靠選中的元件與附件關係辨認，不能只拿圖片網址是否完全相同判斷是不是同一張圖。
本例的title屬性仍是空值。這不妨礙alt已正確輸出，也說明Alt Text不等於滑鼠停留時一定出現提示文字。若你要放可見的圖片說明，應另外處理圖說，不要把讀者應直接看見的重要資訊藏在預期的懸停提示裡。
缺少alt與空alt要分開看
檢查HTML時，沒有alt屬性與明確的alt=””是不同狀態。MDN說明alt提供圖片的替代文字；空字串可用於不需要額外替代描述的裝飾情境。但是否裝飾，取決於圖片在這個頁面裡的用途，不能只看檔案本身。
W3C的Images Tutorial區分資訊圖片、功能圖片和裝飾圖片。按鈕或連結中的圖片，需要讓使用者知道操作目的；資訊圖片需要說明重要內容。圖片旁邊若已經有完整的相同文字，也要考慮避免重複朗讀，依實際結構選擇合適描述。
例如服務流程圖若只有圖中寫了步驟，單填「流程圖」可能不夠；純背景紋理則不必用一段文字逐項描述顏色。遇到內容較多的圖表，可以在正文提供可閱讀的完整說明，讓替代文字幫讀者辨認圖片與相關內容，而不是把整篇說明塞進一個屬性。
改完媒體庫，不代表所有位置都已同步
這個例子只確認選中的傳統Image，在本地儲存預覽輸出正確alt。它不證明網站上所有曾用過該素材的元件都已更新。不同元件、手寫HTML、另一份附件或已儲存的局部設定，都可能使用不同來源。
若要修整站的替代文字，應先列出實際使用位置，再逐個核對前台img。不能只改媒體庫一次，就把所有頁面都標成完成；也不要為了讓一個元件顯示正確，而直接刪掉大家共用的附件再重新上傳，造成其他頁面的引用失效。
遇到仍沒有alt的Image，先確認附件是否選對、頁面是否真的儲存、前台是否讀到最新版本，再查看這個元件有沒有另行保存自己的替代文字設定。排查順序應從實際輸出往來源追，避免只在不同欄位反覆貼同一句話。
最後核對圖片和描述是否仍對得上
換圖後也要回頭看Alt Text。舊圖片的描述可能還留在媒體或元件設定裡，畫面已換成團隊照片，描述卻仍是產品圖。這種情況即使HTML有alt，也沒有正確表達現在的內容。
儲存完成後重新開啟前台，確認圖片可載入、替代文字符合用途，圖說也與現在的圖片一致。替代文字能改善資訊取得方式，但不應承諾只填完一個欄位就一定提高搜尋排名。先把圖片對讀者的意義寫清楚，比堆砌關鍵字更有用。
把描述交接給維護者
多人一起維護頁面時，可以把圖片用途與目前使用位置記在素材紀錄裡。維護者換圖時，便知道哪些描述需要一起改；不要只留下檔名，讓下一個人猜這張圖原本是裝飾還是重要資訊。
如果素材被重複使用，則在交接時說明各頁用途可能不同。首頁的裝飾照片，放到人物介紹頁後可能變成有意義的內容。先理解使用情境，再決定替代文字，能避免把一個曾經合適的空alt直接沿用到所有地方。
評論0