先分清真正改變了甚麼
顧客按下「加入購物車」,所需的資訊並非按鈕閃動一下,而是系統是否接受商品、加入了哪個款式、現有數量,以及金額有否改變。若焦點仍留在按鈕上,使用屏幕閱讀器的顧客也應收到同一結果。W3C 解釋 WCAG 4.1.3 時,正以購物車件數作為狀態訊息的例子:不移動焦點的更新,應有可供輔助科技辨識的角色或屬性。不過,店舖仍須界定甚麼算真正完成。點擊次數不等於已確認的訂單資料。
先為一件商品畫出狀態:等待操作、要求處理中、已接受、被拒絕,以及從伺服器重新取得購物車。每個影響顧客的結果都寫一則簡短訊息。處理中可說明購物車正在更新;成功時應指出商品或款式及確認後的數量;失敗時應提供下一步。畫面上的件數、金額及語音提示須來自同一份已確認狀態。如果較舊的回應在新數量要求之後才抵達,不應將舊結果當成現況宣讀。更新畫面與提示之前,應按要求識別碼或伺服器購物車版本核對先後。
把狀態寫成完整訊息
只宣讀「3」的動態區域,會令顧客猜測它是件數、價錢、庫存還是步驟。W3C 特別指出這個問題,建議將完整購物車語句視為更新內容。「購物車現有三件商品」比單獨一個數字清楚。假設只改動一項,示例可寫成「藍色中碼恤衫數量已改為兩件;購物車合計港幣四百八十元」,前提是金額確已重新計算並由系統確認。英文與繁體中文訊息應各自撰寫,並使用店舖實際貨幣格式與量詞。逐字翻譯有機會令商品名稱不清楚,亦可能混淆件數單位。
語音狀態不應包含頁面完全看不到的關鍵事實。購物車摘要附近也要顯示更新,讓使用放大功能或直接閱讀畫面的顧客看到相同結果。每個數量欄位應標明對應商品,避免一排都只叫「數量」而無上下文。若顧客可繼續選購,正常成功提示不應搶走鍵盤焦點;焦點留在剛才操作的位置即可。若錯誤需要修正,應在受影響控制項旁顯示原因,並讓顧客可靠地找到它。狀態訊息只是提示方式,不能代替可操作控制項及清楚頁面文字。
選擇不干擾操作的提示方式
W3C 的 ARIA22 技術說明,可在更新前已存在的容器設定 role="status"。它預設以較溫和的方式提示新內容,毋須即時打斷操作;整句狀態及其上下文同樣重要。若持續存在的容器內文字改變,完整宣讀可避免只報出一個數字。實作時,可設一個專用購物車狀態區域,在權威購物車回應後更新一則完整短句。不要把整個購物車、價錢表或所有數量欄位設為動態區域;多個總額和頁面節點同時變動,可能產生重疊提示。一句有意設計的狀態較容易理解和測試。
設定 role="status" 並不保證所有瀏覽器與屏幕閱讀器都以完全相同的字句宣讀。提示是否出現,會受更新時序、前端框架替換節點的方法及使用者設定影響。因此即使語音被延遲或略過,仍要保留可見訊息。若店舖先行在畫面更新,應明示「處理中」,不可把暫時數量說成最終結果。要求失敗時,要撤回暫時畫面狀態,告訴顧客購物車實際保留甚麼。載入圖示單純消失,無法讓看不到畫面的顧客知道結果。應明確提示完成或失敗,並在可以安全重試時恢復控制項。
演練數量更新互相衝突的情況
假設顧客的購物車有一件藍色中碼恤衫,先把數量改成兩件,在首個要求仍待處理時又改成三件。第一個回應可能比第二個更遲到達。最終畫面應以伺服器接受的購物車狀態為準,而不是瀏覽器回呼函式的執行次序。若確認後有三件,商品列、摘要及提示均應一致寫三件。若存貨只容許兩件,訊息應交代獲接受的數量,以及三件未能套用的原因。顧客付款前應可再調整;提示不應暗示不存在的貨品已獲預留。
再分別以英文、繁體中文、鍵盤及屏幕閱讀器重做。聽清提示有否完整說出商品及數量,然後核對畫面上的購物車及應付金額。試輸入無效數量、等待網絡故障、移除最後一件商品,然後重試。每條路徑都應只有一個明確結果,舊提示或重複提示不應蓋過較新的狀態。若運費或折扣在結帳後段才計入,就應寫「商品小計」,不要寫成「應付總額」。這種區分亦能防止無障礙提示變成誤導性的商業陳述。
把設計變成驗收條件
產品負責人應先訂明哪份狀態具權威性、何時算更新完成,以及購物車件數是指不同商品列還是實際件數。內容編輯應取得兩種語言的真實商品樣本,包括較長款式名稱和數量上限。開發人員可使用一張小型狀態表,列出操作要求、處理中用語、確認回應、可見摘要、語音狀態及補救行動。這可避免只因某個數字容易取得,就把它放進動態提示,也令驗收不依賴某個特定前端框架。
發佈前,至少在狹窄手機畫面與桌面畫面,並以實際支援顧客的輔助科技組合檢查相同流程。成功更新不應說失敗,失敗更新不應留下虛高數量,連續快速修改後亦應收斂為一致購物車。記錄實測的瀏覽器和屏幕閱讀器組合,不要聲稱所有環境表現相同。下一次重設購物車元件時,仍要保留回歸測試;一項看似只影響外觀的改動,也可能替換狀態節點而令提示失效。實際目標很清楚:顧客決定付款前,能知道購物車究竟有甚麼。
檢查裝置及工作階段界線
購物車也可能在目前分頁以外改變。顧客或許用手機加入商品,再於手提電腦登入;也可能在存貨改變後返回舊結帳分頁。再次要求付款前,應先從權威來源更新購物車,才顯示最終小計。重新整理時若商品或數量有變,應使用與直接修改相同的可見及語音提示。一般同步與需要顧客處理的錯誤應分清。若商品已無貨,須指出是哪件,並提供移除或改選方法;悄悄更改購物車,可能令顧客作出意料之外的購買決定。用兩個分頁及已過期工作階段測試,因為兩者都可能留下看似正常但已過時的購物車。
亦要訂明提示優先次序。一般商品更新可用溫和狀態提示;阻止結帳的錯誤可能需要更明確的焦點與錯誤處理,但每次按數量都發出強烈警報會干擾選購。輔助科技可能把訊息排隊或合併,故不要承諾所有裝置都有固定宣讀次序。應測試最新確認狀態是否一直可在頁面找到,並在重要時刻獲得提示。實際測試紀錄可列出要求數量、伺服器回應、商品列、小計、狀態句子和焦點位置。團隊因此能判斷問題來自交易狀態、文案,還是動態區域的實作。
進行前先確認
- 已確認數量、商品、小計及提示內容一致。
- 被拒絕或延遲的要求有可見及語音結果。
- 英文與繁體中文訊息均經鍵盤及屏幕閱讀器測試。


