先分開畫面與優惠內容

推廣圖往往由一個設計檔開始,攝影、標題、售價、期限及細小條款全放在同一張圖。若只把整張圖匯出作訊息,顧客便難以放大、重新設定字體、選取文字或切換語言。WCAG 2.2 成功準則 1.4.5 指出,技術可以達成所需視覺效果時,應以真正文字而非文字圖片傳達資訊;可自訂或呈現方式本身不可或缺的情況才有有限例外。一般網站推廣可保留照片或插畫作視覺素材,把優惠內容放進頁面文字。先列出顧客作決定必須知道的事實:適用貨品或服務、利益內容、資格、有效時間,以及完整條款所在。清單可以簡短,但必須準確。純裝飾口號與決定訂單條件的價格或限制,是兩種不同的編輯責任。

理解例外的真正範圍

品牌標誌的特定字形可屬於識別的一部分,因此可以用圖片呈現。店舖招牌的照片亦可能自然包含文字,因為照片還有其他重要視覺內容。但這些例子不表示設計師喜歡某款字體,就可以把折扣、參與資格和期限全部鎖在像素裏。W3C 的解釋把主要用來呈現可閱讀文字的圖片,與畫面中附帶文字但另有重要內容的照片區分。相關情況下,若同一資訊亦以可見的真正文字提供,可以符合該準則。即使有需要使用文字圖片,替代文字仍須傳達其訊息;只寫「優惠橫幅」不能告知顧客優惠內容。應就實際素材與訊息判斷例外,不能把它當作所有海報式網頁的通行證。商戶仍可保留活動視覺風格,同時以可調整文字說明交易事實。

為優惠建立單一可靠資料來源

發布前,應由文案負責人整理一份結構清楚的資料:確實適用的貨品範圍、價格或利益、有效時間、限制及目的頁網址。頁面標題、補充段落、按鈕和目的頁須使用同一套已核實條件。若橫幅說「低至」某價,目的頁要指出哪個選項符合起價,以及甚麼因素會改變總額。優惠有條件時,應在顧客看到聲稱的位置附近,以清楚可讀的文字列出關鍵條件,不能只把極小註腳嵌進圖片。替代文字亦不能成為唯一說明,因為有視力但需要放大或重新設定文字的顧客同樣要讀懂內容。雙語頁應以相同的已確認事實,分別寫出自然的英文及繁體中文;兩者都要保留影響決定的條件。把活動結束時間設為編輯檢查項目,免得過期橫幅繼續出現。

在實際裝置上驗證活文字

把圖片放在可伸縮容器,標題、細節與操作按鈕則以真正網頁文字呈現。文字可以放在圖片旁,也可以覆在合適背景上,但對比度及重排後的閱讀體驗要保持可用。不要用固定高度文字框,讓放大字體或轉為繁體中文後的內容被截斷;兩種語言的換行和篇幅未必相同。用窄螢幕、瀏覽器縮放,以及自訂字體或顏色設定測試。版面上下排列時,確認操作按鈕仍與其優惠說明相連。若圖片只作裝飾,因為可見文字已提供所有必要資料,應選擇合適的空替代文字,避免屏幕閱讀器重複一整段優惠。若圖片另外呈現貨品細節,就要為該細節寫替代文字。判斷取決於圖片在這一頁的實際作用,並非所有橫幅都套用同一句替代文案。

用附帶條件的季節優惠演練

假設有一項虛構的季節性維修優惠,只適用於指定服務。初版設計把巨大折扣字句放在圖中,日期則縮在底部。發布前,編輯先核對獲批准的服務清單與真正活動時段。頁面重新安排:照片作橫幅圖片,優惠利益以活文字標題說明,適用服務和日期以可見句子列出,再提供完整條件連結。按鈕應帶顧客到相符的預約或查詢步驟。若商戶尚未能為某類維修核實最終價格,文案應說明檢查後才報價,不可虛構固定節省額。繁體中文頁的資格與時限須與英文頁一樣顯眼。活動結束時,圖片、文字及連結應一起檢查。這只是流程示例,並非任何 Astera 真實活動或成效的報告。

以顧客角度審查最終頁面

審查最終上線的組合,而不只看設計檔。逐項把可見聲稱與限制對照核准資料,再開啟目的頁核實適用範圍和日期是否一致。關閉圖片或使用屏幕閱讀器,確認仍能理解優惠及下一步。放大文字、改變顯示設定,觀察重要字句是否仍可閱讀。英文與繁體中文頁分別通讀,不可假設翻譯後每項限制自然會保留。檢查圖片替代文字是否符合實際用途,既不可虛構折扣,也不必無故重複整段文案。最後查看社交平台預覽或電郵裁切:這些格式或會使用圖片,但網站目的頁仍須提供完整可用的訊息。審查通過的標準,是顧客能看清優惠並走到正確下一步,同時可以按自身需要調整文字呈現。

管理不同渠道的版本

同一活動通常會出現在首頁主圖、分類卡片、電郵與社交平台預覽。這些素材的裁切或快取各有不同,因此商戶應指定網站目的頁作為可閱讀並連結完整現行條款的地方。簡短渠道仍須如實表述,不能展示目的頁已撤回的折扣。保留簡潔的核准記錄,列明優惠文字、適用貨品、開始與結束時間,以及可修改的人員。啟動前和到期時,都要檢查實際頁面與相關連結。若活動提早暫停,應更新各個展示位置,而非只改主橫幅。當英文和中文圖片或範本由不同員工製作,這點尤其重要。共用同一套已確認事實,可保持訊息一致,同時容許兩種語言自然表達。

判斷圖片是否載有必要資訊時,可請同事先遮住圖片,只讀頁面文字:能否知道優惠、主要限制及下一步?再遮住活文字檢查圖片:圖中是否多出文案沒有解釋的聲稱、價格或期限?若有,發布前先對齊。放大頁面及切換兩種語言後再重做。只在大型桌面畫面審稿,容易漏掉手機上消失的細小條件。若圖片的文字只是拍攝場景中偶然出現,也應記下判斷,並檢查它會否被誤認為優惠。目標是只有一套連貫訊息,讓圖片載入失敗、文字設定改變,或顧客使用輔助技術閱讀時,仍可理解和作決定。

進行前先確認

  • 優惠、資格及日期均以可閱讀網頁文字顯示。
  • 目的頁能支持橫幅的每項聲稱。
  • 兩種語言及放大版面均保留條件。

資料來源及延伸閱讀