甚麼情況才算可以取消

顧客拿着手機時可能碰錯控制項,使用滑鼠時也可能先在旁邊的按鈕按下,然後才發現位置錯了。關鍵是接觸屏幕的一刻是否已經執行了操作。WCAG 2.2 的 2.5.2 準則適用於單一指標可操作的功能,列出幾種合格途徑:按下時不執行、放開時完成而且可在完成前取消或完成後復原、放開時逆轉按下造成的效果,或按下時執行確屬必要。一般網頁按鈕最容易採用放開才啟動的方式。按鈕夠大仍未必安全;若手指一碰到便落單,就要檢查這個時序。

先列出每個控制項真正引發的業務後果,不能只看按下時的顏色。開啟選單、加入儲存地址、移除購物車貨品,以及發出付款要求,後果並不相同。接觸時顯示按下動畫可以只是提示;若程式在 pointerdown 或 touchstart 已建立訂單、發出不能收回的訊息或付款請求,顧客即使把手指移開也太遲。操作完成後顯示「復原」可能有幫助,但不能把所有過早在按下事件完成的動作都當作符合準則。逐項記錄由接觸、移動、放開到伺服器真正改變資料的時間點。

這項檢查不要和觸控目標大小混在一起;兩者有不同的無障礙要求及測試方法。較大的點按範圍可減少誤按,卻不能保證誤按後仍能撤回。付款前的訂單確認頁也很有用,但若最後的自訂付款按鈕在接觸瞬間便執行,確認頁本身不會修正問題。團隊要能逐一說明:接觸時發生甚麼、指標移出範圍後怎樣、在控制項內外放開又會怎樣。這比籠統地稱網站適合手機使用更能指導修正。

決定啟動事件及復原途徑

一般操作,例如開啟產品詳情或選擇送貨選項,先考慮原生連結、按鈕或適當的表單控制項,沿用其正常啟動行為。W3C 的 G212 技術文件說明,原生控制項通常在放開時才啟動;開發者若另加按下事件處理器,便可能破壞這個特性。JavaScript 的 click 事件可涵蓋指標及鍵盤啟動,只有 pointerdown 監聽器則會增加輸入方式及取消操作的問題。若業務上確需自訂元件,應把按下時的視覺提示與真正的業務動作分開,並在支援的裝置上以滑鼠、觸控及觸控筆實測。

要刻意測試取消:先在控制項內按下並保持接觸,清楚地移到範圍外才放開。不能因為起點在按鈕內就提交訂單。手機瀏覽器捲動後也要重試,因為移動手指可能被解讀為手勢。再測試靠近邊緣接觸,以及移出後再移入,並先訂明元件應有的結果。不要在沒有協調下,同時用 touchend 和 click 各自執行同一動作,以免某些實作重複執行。驗收紀錄應包含事件次序與訂單或資料的最終狀態,不能只截取按鈕畫面。

確有少數操作必須在按下時執行,例如模擬鋼琴鍵,按下便要發聲。WCAG 將此列為狹窄例外,不能因為希望購物流程看來更快,就把普通按鈕也歸入例外。結帳、刪除或修改帳戶設定一般沒有這種必要。如果按住期間有某種效果,應檢查放開時是否把效果逆轉;只在按住時顯示的臨時預覽,與已儲存的變更截然不同。任何例外時序都應記下理由,並評估能否提供放開才啟動的等效操作。

以誤按購買按鈕作演練

假設顧客用手機比較兩件相似產品,原本想查看送貨資料,卻碰到最後的購買按鈕。在放開才啟動的設計中,按鈕可先顯示按下狀態;顧客發現碰錯,把手指移到按鈕外才放開,訂單仍未提交。如果在按鈕內放開,正常結帳流程只應執行一次。團隊可用測試帳戶及測試付款環境驗證兩條路徑,查看訂單列表、付款請求與顧客通知佇列。這是示例測試條件,不是某間店的實際事故或失誤率。

另一個例子是刪除已儲存的送貨地址。介面可以提供「復原」,但團隊要界定復原是否同時還原畫面上的資料列、伺服器中的地址、未完成結帳引用的資料,以及待同步到其他系統的變更。只把資料列畫回來,伺服器仍視地址為已刪除,並不是真正可靠的復原。宜先採用放開時啟動;如業務後果較大,再提供真實有效的復原途徑。若伺服器拒絕操作,畫面亦須恢復正確狀態,並說明顧客下一步可以怎樣處理。

放開測試要在實際使用的不同畫面寬度,以及業務支援的輔助輸入方式下重做。桌面滑鼠測試不能代替觸控;只輕點按鈕,也看不到手指滑出後放開的結果。還應另做基本鍵盤測試,因為加入指標專用事件處理器可能意外令鍵盤不能啟動。以慢速網絡再試,確認控制項是否清楚顯示處理中,以及連續按下時會怎樣。這些測試都回答同一個顧客問題:有意在按鈕內放開是否只造成一次可理解的動作,撤回的按壓是否完全沒有執行?

把發現化為推出前檢查

列出會改動紀錄、發送訊息或開始付款的顧客控制項。每一項記下底層元素、按下、移動、放開及 click 事件的處理方式、真正完成操作的伺服器請求,以及可用的取消或逆轉方法。優先處理後果難以收回或成本較高的操作。這是一份實用測試清單,不是新增的發布審批程序。開發人員可把過早在按下時執行的功能改為正常啟動,再讓產品負責人比較修正前後同一個滑出取消步驟。按下動畫仍然出現沒有問題,前提是真正動作要等待有效放開。

手動測試合格應有可觀察結果:在範圍內按下及放開只啟動一次;在範圍內按下、範圍外放開不改動業務資料;鍵盤仍可啟動;網絡請求中斷時不會錯誤聲稱成功。重新載入頁面後也要核對結果,因為臨時畫面狀態可能掩蓋伺服器已完成的操作。紀錄結果時要保持範圍清楚。指標取消本身不能證明標籤、焦點次序、付款處理或訂單覆核等其他要求全部符合;它專門揭示一種可以修正的顧客誤操作來源。當常用控制項的行為一致,團隊便能清楚說明碰錯按鈕究竟會否造成後果。

推出前核對

  • 普通顧客操作不會在接觸瞬間便完成。
  • 放開前移出控制項,底層紀錄維持不變。
  • 有效放開只啟動一次,鍵盤亦可操作。

資料來源及延伸閱讀