圖片看起來正常，不表示替代文字也已經正確輸出。Divi頁面中，同一個Image模組外面有容器，裡面才是實際的圖片元素。若把alt加到外層模組，欄位雖然有文字，真正的img仍可能沒有替代文字。處理時需要同時核對屬性名稱和作用的元素。
目前Divi 5使用Attributes管理HTML屬性。這份教學以Elegant Themes官方公開演示為例，在未儲存的工作階段為一個Image新增替代文字，再查看畫布中的img。如果你的介面仍是較舊版本的獨立Image Alternative Text欄位，應依自己的版本操作，不必為了對照本例而升級網站。
先找到畫面上真正的Image模組
打開Visual Builder的Layers，選擇需要處理的Image。面板頂端應顯示Image，並有所在的Section、Row和Column路徑。若選的是包含圖片的Row或Section，新增屬性可能落到那個容器，並非你要修改的照片。
本例選官方演示中第一張介面圖片，來源檔名是d5-interface-1-1.jpg。檔名只用來協助對回同一張圖，不是要把它直接當成替代文字。畫面裡另有相似圖片，所以修改後還會核對來源，避免讀到另一個Image的屬性。
若圖片是背景圖，也不能假設它和Image模組一樣有img可設定。先確認內容用途：需要傳達資訊的圖片，應能提供相應的文字內容；純背景裝飾與文章中的說明截圖，處理方式不同。這篇示範只針對Image模組中的實際圖片元素。
在Attributes新增alt並選對目標
切到Advanced頁籤，展開Attributes，點Add Attribute，再選alt。在Edit Attribute面板中，可以看到Target Element、Attribute Name與Attribute Value。本例新開啟時，Target Element預設是Module，這是最容易漏看的地方。
把Target Element改成Image，確認Attribute Name仍是alt，再把描述寫到Attribute Value。不要只因為自己在Image模組裡，就認為所有屬性自然都落到內部圖片；同一個模組允許選不同目標，應以欄位的實際選項為準。
本次填入的是一段描述介面示意內容的英文文字，說明桌機與筆電螢幕上顯示Divi建置器。這是演示用的描述，不是從圖片檔名拼出來的文字。自己的圖片若是商品、流程圖或操作介面，應寫出讀者理解這張圖所需的內容，不用照抄這段範例。
輸入後離開欄位，確認它已套用。若有同名屬性或其他動態來源，先查看目前設定，避免反覆新增多個alt項目。不要為了解決一張圖片的文字，把全站模組屬性或媒體資料一次重設；先讓這張圖片的輸出清楚可查。
真正要核對的是img上的alt
完成設定後，畫布中第一張圖片的alt確實變成剛才輸入的描述，來源仍是同一張d5-interface-1-1.jpg。外層模組沒有alt，圖片的title也沒有被這次操作加上。這組結果確認本例選到Image目標，沒有把替代文字放錯容器。
若要清空Attribute Value，清空後應重新檢查同一張圖片的HTML，確認結果是沒有輸出alt，還是輸出alt=""。重新填入描述後，也要核對圖片上的文字是否更新，不能只看編輯欄位。不同版本與站點的媒體資料可能影響結果，應以自己的頁面輸出為準。
尤其要分清沒有alt與alt=""。兩者的HTML結果不同；裝飾圖刻意使用空替代文字的需求，不應只憑編輯欄位看起來空白就認定已完成。若你的用途要求空替代文字，要回到自己版本的設定和公開頁確認最終輸出。
媒體庫資料與模組設定要分開查
有些站長先在WordPress媒體庫填了替代文字，再回到Divi看圖片是否更新。這時需要確認目前模組是不是同一個媒體項目，以及有沒有自行設定的屬性或動態來源。只看媒體庫某個欄位有值，不能代替查看這張圖片在頁面中的輸出。
本例使用免登入官方演示，沒有修改或查驗媒體庫的既有替代文字。因此這篇不斷言「媒體庫永遠優先」，也不斷言「模組永遠覆蓋媒體庫」。遇到兩邊內容不同時，應核對自己安裝版本的規則，並用一張可辨認的測試圖片比較輸出，再決定該改哪個來源。
Divi 5官方Custom Attributes文件說明，屬性設定已集中到新的管理方式。這也是為什麼舊教學中的獨立欄位，可能與你目前看到的介面不同。先對上版本和目標元素，會比搜尋一個在新介面裡已經搬家的欄位更有效率。
替代文字要依圖片的用途寫
W3C的影像替代文字指南從用途出發：圖片是否提供必要資訊、是否重複旁邊已有的文字，以及是否作為連結或操作的一部分，都會影響需要的文字。網站中每張圖的角色不同，不應一律填同樣的品牌名稱或一串搜尋詞。
例如商品照片若要說明顏色與外觀，可以描述該照片可見的特徵；介面圖若用來指出按鈕位置，描述應和正文的操作步驟配合。文字已在旁邊完整說明、圖像僅用來裝飾時，則要評估是否需要空替代文字。先問讀者少了這張圖會缺少什麼資訊，再決定內容。
title也不是alt的替代品。滑鼠停留時可能看到提示，不表示使用輔助科技的讀者就取得適合的替代內容；觸控裝置的使用方式也不同。不要把alt、標題、圖片說明或媒體檔名當成可以互換的四個欄位，應依各自用途處理。
在自己的公開頁確認最後結果
這次演示只修改未儲存的畫布，沒有改動正式網站。自己的頁面完成設定並依流程儲存後，應離開Visual Builder，以訪客狀態重新載入，找到同一張圖片，確認實際img上的alt、來源與用途都相符。若有快取，也要排除舊HTML仍在回應的情況。
檢查時可以用瀏覽器的元素面板閱讀屬性，再配合你採用的無障礙檢查方式。不要只用圖片破圖時出現的文字作為唯一判斷，因為正常載入時的輔助科技體驗仍需要另外確認。這份演示沒有進行完整螢幕閱讀器驗收，也沒有宣稱搜尋排名因此改善。
之後若把這個Image複製到其他位置，還要再次看替代文字是否符合新用途。同一張圖片在不同頁面可能扮演不同角色，沿用描述前應確認它仍然提供需要的資訊。把檢查放在實際圖片元素與頁面情境上，才不會留下「欄位有填、讀者仍拿不到內容」的問題。
評論0