量度可點按範圍,不只看圖示
顧客看到整齊的一排搜尋、數量、刪除及求助圖示,卻可能在搖晃的車廂內反覆按錯。要判斷的不是圖示是否漂亮,而是實際可點按範圍能否讓人有把握地操作。應在完成響應式排版的頁面,檢查按鈕元素及其內距,不要只量度圖案本身。十六像素的圖示可以放在較大的按鈕內;看似很大的符號,也可能只有很小的感應區。手機寬度、瀏覽器縮放及臨時橫幅均可能改變排列,因此要以實際呈現的狀態作準。記下相鄰控件及誤按後果:誤開求助與誤按刪除或付款,影響並不相同。最後應得到一份實際點按範圍及周邊間距清單,而非只憑截圖猜測。
分清最低準則
WCAG 2.2 的成功準則 2.5.8 屬 AA 級,一般要求指標輸入的目標區域至少為二十四乘二十四 CSS 像素,但列有例外。這裏說的是 CSS 像素,不是手機截圖的實體像素;量度對象是可操作區域,設計稿本身不能證明正式頁面合格。準則亦沒有要求每個圖示的可見圖案都填滿方格,可以保留細小圖案,同時以內距擴大按鈕。寬度和高度均要檢查:很闊但很薄的分頁仍可能過小。圓角或不規則形狀更需仔細核對,因為規定大小的正方形須能真正放進目標區域。把這項要求視為基本檢查,再按任務風險調整。付款鍵旁若擠着其他操作,實務上宜提供比最低門檻更充裕的空間。
審慎使用間距例外
較小的目標區域可以藉間距例外符合 AA 準則,但這是幾何測試,不代表所有小按鈕都可直接放行。W3C 的方法是以每個過小目標邊界框的中心,畫一個直徑二十四 CSS 像素的圓;該圓不可碰到其他目標,亦不可與另一個過小目標的圓相交。官方例子中,二十乘二十 CSS 像素的目標相隔四 CSS 像素可以符合間距例外;同樣大小而緊貼的目標則不行。不要把四像素當成通用安全距離,因為形狀、裁切、方向和旁邊控件大小都會改變結果。密集工具列通常直接擴大可點按範圍更易測試和維護。英文或中文標籤換行後,兩排控件也可能突然靠得很近,故每種相關畫面寬度都要重查。
不要擴大解讀例外
同一準則亦容許同頁有符合要求的等效控件、句子中的行內連結或受文字行高限制的目標、未被作者修改的瀏覽器控件,以及細小位置屬內容本質所需或法律規定的情況。每項例外各有條件,不能混為一談。把相似功能藏在頁尾,不一定可作結帳頁小按鈕的有效替代;自行設計的日期選擇器,亦不能自動引用未修改瀏覽器控件的例外。商品數量加減鍵只是設計上想排得緊密,並不等於其大小有本質需要。若採用例外,應記下具體功能、替代入口及適用理由。將來改版或翻譯後,原有替代入口可能消失,留下書面判斷可協助團隊及早發現。
了解更高的目標
WCAG 2.2 另有 AAA 級成功準則 2.5.5,一般以四十四乘四十四 CSS 像素為目標,同樣設有其自身例外。這是較高級別的要求,不能因控件少於四十四像素,就直接稱頁面不符合 AA。反過來,剛好符合 AA 的幾何底線,也不表示趕時間的顧客必然用得順手。團隊可以為主要操作、浮層關閉鍵、地圖控件,以及緊貼刪除操作的按鈕採用更大的感應區。設計時要考慮單手操作、行走時使用和中英文長度差異。將選定的尺寸寫成產品規則,日後新增控件便不會不知不覺回到過於擠迫的預設排列。
以購物籃作具體判斷
假設購物籃同一行依次放着減號、數量、加號及移除鍵。某款手機上圖示大小相近,但移除鍵的實際點按框很窄,而且緊靠加號。先量度正式頁面上的感應框;若移除鍵任何一邊少於二十四 CSS 像素,便要連同所有相鄰目標測試間距例外,不能只看單一按鈕。然後衡量誤按後果:即使勉強可引用間距例外,增加按鈕內距、把「移除」與數量控件分開,通常更容易辨認。商品中文名稱較長而換行時,要再測一次;若數量可直接輸入,亦應在螢幕鍵盤打開時檢查。這是示範決策方法,並非聲稱所有購物籃都有相同尺寸或問題。
測試操作,不只量尺寸
可先用瀏覽器檢查工具記下實際控件邊界,再盡可能在真實觸控裝置操作。請測試者找商品、改數量、處理誤按,然後完成流程,記錄是否觸發了旁邊的操作。若顧客也會用滑鼠或觸控筆,同樣應試。放大透明感應區時,要確保沒有覆蓋其他控件,並保留清楚的焦點及可見名稱。固定頁尾、客服氣泡和推廣橫幅也可能擠壓原本合適的按鈕。彈出視窗出現後,應測試視窗本身的操作,而非只測底下頁面。尺寸量度回答準則是否符合;完成任務的觀察則回答購物或預約過程是否順暢,兩種結果應分開記錄。
留下精簡而可用的檢查紀錄
每個重要畫面只需保留足夠重現結果的紀錄:畫面寬度、語言、控件名稱、實際可點按邊界、最近的相鄰目標、所引用的例外、修正負責人及重測結果。單張截圖不能代表整個網站的無障礙狀態。先處理提交付款、修改預約、刪除資料、關閉求助及密集導覽列中的控件。共用元件宜由源頭修正,但在不同頁面仍要重查間距,因為上下文可能不同。正式推出前,以顧客會使用的實際畫面和語言做簡短回歸測試。這樣業務團隊便有重複可用的判斷方法,顧客亦較容易完成操作;遇到邊界情況,開發或無障礙專員可按紀錄覆核。
決定何時可推出
若實測控件不符合準則,應選擇日後內容改動後仍然穩妥的修正方式。增加共用按鈕的內距可一次改善多個頁面,但須確保放大後的感應框不會互相覆蓋。把高風險操作移到獨立一行,往往比在擠迫工具列硬塞幾個像素更清楚。若團隊引用等效控件例外,要確認顧客在同一頁找得到該控件,而且能完成完全相同的功能。問題應在修正後的正式頁面重測通過才算解決;設計工單或程式修改本身不是測試結果。決定是否推出時,要看受影響任務是否必要、控件出現的範圍,以及誤按會否遺失資料或提交訂單。這是產品優先次序判斷,不能當成新的 WCAG 例外。若暫時未能修正,應提供真正可用的顧客途徑並安排具體修復,不要憑未核實的替代渠道宣稱已符合準則。
正式推出前的核對
- 在手機畫面量度實際可點按範圍及相鄰控件。
- 列明並解釋任何採用的 WCAG 例外。
- 以英文及繁體中文重測整個操作流程。


