無障礙輕觸目標

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

當您的設計顯示在行動裝置上時 務必確保按鈕或連結等互動元素夠大。 而且周圍有足夠的空間 讓使用者輕鬆按下按鈕,而不會意外與其他元素重疊。 讓所有使用者都能受惠 但對於行動不便的使用者而言特別有幫助。

建議觸控目標大小至少為 48 個裝置獨立像素 且行動版可視區域正確設定而成 舉例來說,圖示的寬度和高度可能只有 24 像素 您可以使用額外的邊框間距,讓輕觸目標的大小提升至 48 像素。 48x48 像素的區域相當於 9 公釐 這反映了使用者的指尖大小。

在示範中,我已為所有連結加上邊框間距,以確保符合最小尺寸。

觸控目標之間也應保持約 8 像素的距離。 水平和垂直方向 導致使用者的手指輕觸目標不會意外觸碰到另一個輕觸目標。

測試觸控目標

如果您的目標是文字,並且您使用 emrem 等相對值來調整文字大小和任何邊框間距, 可以使用開發人員工具確認該區域的計算值夠大 在以下範例中,我使用 em 做為文字和邊框間距。

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

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

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

與其單純測試可視區域尺寸,然後猜測 圖片如果較小,可能是手機或平板電腦 使用觸控螢幕時,現在有更穩健的方式 進行設計。

這是一項媒體功能,現在可以透過媒體查詢進行測試 使用者的主要輸入來源是否為觸控螢幕 (pointer),且 目前偵測到的任一輸入裝置是否為觸控螢幕 (any-pointer)。 pointerany-pointer 功能會傳回 finecoarse。 比方說,有人使用滑鼠或觸控板 就算該滑鼠已透過藍牙與手機連線 coarse 指標代表觸控螢幕 該裝置可以是行動裝置,但也可能是筆記型電腦或大型平板電腦

如要調整媒體查詢中的 CSS 來增加觸控目標, 測試概略指標可讓您擴大所有觸控螢幕使用者的輕觸目標。 如此一來,無論裝置是手機還是更大尺寸的裝置,輕觸區域都能放大該區域。

.container a {
  padding: .2em;
}

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

歡迎進一步瞭解指標等互動媒體功能 參閱「回應式網頁設計基本概念」一文。