觸控目標尺寸是什麼,WCAG 要求多大?
觸控目標尺寸指的是一個按鈕、連結或表單控制項「真正能被點中的範圍」有多大。注意是可點擊範圍,不是圖示看起來多大:一個 16 像素的圖示,外面包著 24 像素的可點擊區域,就算 24 像素。
WCAG 2.2 新增的成功準則 2.5.8「目標尺寸(最小)」屬於 AA 級,要求指標輸入的目標至少 24×24 CSS 像素。更嚴格的 2.5.5「目標尺寸(強化)」屬於 AAA 級,門檻是 44×44 像素。
為什麼需要這條規定?
小目標對很多人都是障礙:手部震顫或動作控制較弱的人容易點錯,用單手在手機上操作的人、在移動中使用的人也一樣。點錯的後果不只是不方便,如果相鄰的是「刪除」「付款」這類動作,就可能造成真實的錯誤。
2.5.8 的設計思路是在不強迫所有元素都放大的前提下,設一條可達成的底線:24 像素。需要更高保證的人可以追求 2.5.5 的 44 像素。
實際怎麼判斷一個元素有沒有達標?
先量可點擊範圍的寬與高,兩者都至少 24 CSS 像素就通過。小於 24 像素的目標,仍可能因下列例外而通過:間距(與每個相鄰目標都有至少 24 像素的偏移)、等效(同一頁面有另一個符合標準的控制項能達成同樣功能)、行內(目標在句子或文字區塊中)、使用者代理控制(尺寸由瀏覽器決定、作者沒有修改)、必要性(某種呈現方式是必要的或法律要求的)。
間距例外的檢查方式是:以每個小目標的邊界框為中心畫一個直徑 24 像素的圓,這些圓不能與其他目標或其他小目標的圓相交。
對設計師和用 AI 生成介面的人有什麼影響?
設計稿裡的圖示按鈕最容易失手:視覺上 16 像素很乾淨,但如果可點擊範圍也只有 16 像素、旁邊又緊貼其他按鈕,就同時不符合尺寸和間距的規定。解法通常不是把圖示放大,而是加大可點擊範圍(內距)或拉開間距。
用 AI 工具生成介面時,這類檢查值得列進驗收清單。有第三方評測指出,某些生成結果在色彩對比與觸控目標大小上達不到基本無障礙要求(該評測出自競品網站,需自行驗證)。把「所有互動元素的可點擊範圍至少 24×24 像素」寫進提示,並在交付前實際量過,比事後修補便宜。
W3C 對「間距」例外的說明是最清楚的實例:一個 16 像素的小圖示按鈕,即使本身不到 24 像素,只要以它為中心畫出的 24 像素直徑圓,不與鄰近按鈕或其他小目標的圓相交,就符合 2.5.8;若兩個 16 像素的按鈕緊貼在一起,圓會重疊,就不通過。句子裡的行內連結則直接適用「行內」例外,不受 24 像素限制。
優點是用一條可量測的底線降低誤點,對動作控制較弱的人與行動裝置使用者都有幫助;缺點是在密集的介面(工具列、表格操作列)中,滿足尺寸與間距會佔用更多空間,需要在資訊密度與可用性之間取捨,而 24 像素只是最低門檻,不保證真的好點。