先找出顧客欠缺哪項資料
產品照片可能有不同任務:在搜尋結果中辨認貨品、展示顏色、示範開合方式、提供尺寸比例,或只作促銷橫幅的裝飾。替代文字應傳達當下真正有用的任務。W3C 的圖片判斷流程會先問:圖片有沒有傳遞資訊、附近文字是否已說明同一內容、圖片是否連結,以及是否純屬裝飾。這比一律寫「圖片:」再貼上商品名稱更可靠。同一張圖若是目錄卡片唯一標籤,與在已有詳細文字的商品頁重複出現,所需文字可能不同。
編輯應先寫下顧客看過圖片後要作甚麼判斷。若兩款杯蓋在縮圖中非常相似,而附近沒有文字標示,替代文字應指出照片是哪一款杯蓋或拍攝角度。如果照片只重複旁邊已標示「綠色」的顏色選項,再讀一次可能幫助不大。若把手能否摺合會影響購買,亦應把這項資料放在一般產品說明,不能只藏在圖片或替代文字內。目標是讓不同顧客取得同樣有用的資訊,而不是列出冗長的畫面物件清單。
把目錄卡片視為可操作項目
若圖片本身是連結,而鄰近文字沒有清楚說明去向,圖片就負有另一項責任。W3C 指出,功能性圖片應傳達連結或按鈕用途;只有「照片」兩字的縮圖連結,使用屏幕閱讀器的顧客無法知道會去哪裏。寫文字前先看整張卡片:若圖片及商品名稱同在一條連結,而連結的可存取名稱已包含商品名稱,圖片再讀一次可能形成笨拙重複。若縮圖是獨立連結,它便需要可理解的目的地名稱。恰當寫法取決於卡片結構和瀏覽器呈現的可存取名稱,不能只按檔案類型決定。
假設目錄有兩款保溫杯:「Stone 350 毫升」及「Stone 500 毫升」。縮圖相似,但卡片標題已有容量,而整張卡片只有一條連結。簡短指出不同的杯蓋顏色或許有幫助;每張圖再複述完整標題則未必需要。若圖片另外用來開啟放大檢視,標題才通往商品詳情頁,圖片控制項必須說明「放大檢視」,而放大視窗應讓顧客回到原本決定。這只是設計例子,並非真實店舖或商品的描述。套用文字前,必須核對實際標記及輔助工具讀出的結果。
逐張交代商品圖集的差異
商品詳情頁的圖集常有正面、背面、扣位細節及使用情境。若每張圖片都只用相同商品名稱,顧客便不知道它們有甚麼差別。每張具資訊性的圖片,應簡短指出有助購買的角度或特徵,例如「杯身背面,可見摺合把手」或「旋轉杯蓋近照,可見飲用口」。文字要準確簡潔;不能單憑照片推斷材質、安全等級、相容性或尺寸。這些事實應放在核實過的商品資料。若圖片是附註尺寸的圖解或比較圖表,短短一段替代文字未必容得下全部數值及關係,應在鄰近正文或表格提供資訊。
不能只靠顏色區分不同款式。色塊可以有顏色名稱,而選中的款式亦要在控制項中清楚呈現。圖集圖片便可描述視覺差別,毋須讓顧客在沒有脈絡的顏色字串中猜測。若五張照片只是近乎相同的角度,應檢討每張是否真的幫助決定;移除重複圖片可能令所有人更容易使用。若圖片確實沒有比鄰近文字多出資訊,按 W3C 的判斷流程使用空的 alt 屬性是合理選擇。空 alt 是有意識的實作決定,不能讓系統自動以檔案名稱填補。
把替代文字納入商品上架流程
商品編輯應先以足夠大小查看圖片,同時看到頁面附近文字及所屬款式,再填寫替代文字。供應商檔名如 IMG_2048,或自動產生的圖片標題,都不是可靠起點,因為可能漏掉店舖實際出售的特徵。每張圖片應有獨立欄位,並提示員工回答:「這張圖額外提供了哪項購買資訊?」同時核對標題、款式標籤、規格及圖說,讓關鍵事實亦能以一般文字取得。雙語頁面要分別按各語言讀者撰寫,並沿用該版本實際顯示的商品名稱與單位。逐字翻譯可能與本地化款式名稱矛盾,亦可能漏掉只在其中一版呈現的細節。
可先抽查較易出錯或較影響購買的類別:外觀決定款式的商品、需要核對相容性的配件,以及涉及安全或組裝步驟的圖片。如果沒有分析數據,就不要聲稱某類別流量較高;可以依據實際銷售、客服提問,或明言按營運重要性抽樣。安排人員把替代文字與真實圖片核對;若圖片暴露規格資料不足,另開工作修正商品資料。供應商照片一旦更換,也要重看原有文字,因為舊描述可能已不符合新圖。保留修改紀錄,避免下次目錄匯入時把修正覆蓋。
以看不到圖片的方式測試購買旅程
應在搜尋結果、商品卡片、款式選擇及圖片圖集中,用屏幕閱讀器或瀏覽器的無障礙檢查工具測試;如可行,邀請真正依賴該技術的人一同檢查。留意重複名稱、沒有標籤的圖片連結、被讀出的檔名,以及每張圖都讀成同一句話。暫時隱藏圖片,看看顧客仍能否分辨所售款式及找到規格。不能把自動報告的「所有圖片都有 alt」當作完成證據:文字可能存在,卻沒有幫助。相反,裝飾或真正重複的圖片使用空 alt 可能完全正確。記錄具體頁面及圖片、受影響的購買決定,以及修訂後文字。
驗收時應確認圖片用途清晰、有意義的差異可用文字取得、操作項目名稱明確,而且兩種語言的閱讀次序都合理。這是實際編輯及介面檢查,不能宣稱解決所有無障礙問題。如果照片含糊得無法有把握描述,應向商品負責人索取核實資料,不要自行編造。若整頁在看不到圖片時無法作出比較,就要連頁面內容及控制項一起改善,而不只改 alt。好的替代文字,目的是讓顧客也能作出原本視覺設計所支援的知情決定。
處理短句難以說清楚的圖片
有些商品圖片是證據,不只是裝飾。服裝尺寸照片可能示範量度起點和終點;電器轉接器照片可能展示插頭形狀;比較圖可能把兩個版本並排。短替代文字可以指出圖片用途,但實際尺寸、支援型號及差異,應在附近文字或有結構的表格中說明。這些資料須由商品負責人按真正出售的貨品核實。不能要求編輯只憑外觀推斷插頭相容性或布料成分。若圖片承載警告,頁面亦要用一般文字呈現警告;圖片無法載入、被放大或顧客不能以視覺接收時,重要內容才不會消失。
另一種邊界情況是展示商品使用情境的照片。它可能幫助理解大小或拿取方法,但也可能造成未經核實的規格印象。若情境真正有幫助,只描述畫面可見內容,例如「有人單手拿著杯子,旁邊放著筆記簿」。除非商品資料及相關證據已核實,否則不要從照片推斷「完全防漏」、「兒童安全」或「適用所有杯架」。審稿時要以完整大小查看圖片,因為內容管理系統的小型預覽可能遮蓋所描述的特徵。照片一旦更換,就要重新按圖片用途作判斷;昨天準確的文字,今天可能已誤導買家。
交付前核對
- 每張圖片的描述是否在其實際位置補足必要資訊?
- 顧客看不到照片時,能否分辨款式及圖片操作?
- 兩種語言是否已與真實圖片及商品資料核對?


