無障礙輕觸目標

Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney
Patrick H. Lauke

當設計顯示在行動裝置上時,請確保按鈕或連結等互動元素的大小足夠大,且周圍保留足夠空間,方便使用者輕觸,同時避免意外重疊到其他元素。這造福了所有使用者,但對行動不便的使用者而言特別有幫助。

在設有正確設定的行動裝置可視區域的網站上,建議的觸控目標大小下限約為 48 個裝置獨立像素。舉例來說,雖然圖示的寬度和高度可能只有 24 像素,但您可以使用額外的邊框間距,將輕觸目標大小提高至 48 像素。48x48 像素的區域約為 9 公釐,相當於使用者的指腹區域大小。

在示範中,我已為所有連結新增邊框間距,確保連結符合最小大小。

觸控目標的水平和垂直間距也應相距約 8 個像素,以免使用者按下一個觸控目標時,不小心觸碰到另一個觸控目標。

測試觸控目標

如果目標是文字,且您使用了 emrem 等相對值來設定文字和邊框間距的大小,可以使用 DevTools 檢查該區域的計算值是否足夠大。在以下範例中,我使用 em 做為文字和邊框間距。

檢查連結的 a,然後在 Chrome 開發人員工具中切換至「Computed」窗格,您可以在其中檢查方塊的各個部分,並查看它們會解析為哪個像素大小。Firefox 開發人員工具中會提供版面配置面板。 您可以在這個面板中取得已檢查元素的實際大小。

Firefox 開發人員工具中的版面配置面板,顯示 a 元素的大小

使用媒體查詢偵測觸控螢幕使用情形

您可以透過更可靠的方式,根據實際裝置功能調整設計,而非只測試檢視區大小,然後猜測小尺寸可能屬於手機或平板電腦,進而使用觸控螢幕。

我們現在可以使用媒體查詢來測試的其中一個媒體功能,是檢查使用者的主要輸入是否為觸控螢幕 (pointer),以及目前偵測到的任何輸入是否為觸控螢幕 (any-pointer)。pointerany-pointer 功能會傳回 finecoarse。有些人會使用滑鼠或觸控板,即使滑鼠已透過藍牙連線至手機也是如此。coarse 指標代表觸控螢幕,這可以是行動裝置,也可以是筆電或大型平板電腦。

如果您在媒體查詢中調整 CSS 以增加觸控目標,針對粗略指標進行測試,即可為所有觸控螢幕使用者增加輕觸目標。無論裝置是手機還是較大的裝置,都能提供更大的輕觸區域。

.container a {
 
padding: .2em;
}

@media (any-pointer: coarse) {
 
.container a {
   
padding: .8em;
 
}
}

如要進一步瞭解互動媒體功能 (例如指標),請參閱「回應式網頁設計基礎知識」一文。