# 什麼是點擊與觸控目標大小？

最後更新: 2026-10-03

英文版本：[https://accesserty.com/en/ai/glossary/target-size.md](https://accesserty.com/en/ai/glossary/target-size.md)

頁面版本：[https://accesserty.com/glossary/target-size/](https://accesserty.com/glossary/target-size/)

點擊與觸控目標大小關注按鈕、連結與互動元件的實際可操作區域，涵蓋滑鼠、觸控板與觸控螢幕，不只是手機。了解 WCAG 2.2 的 AA／AAA 尺寸與例外，以及如何檢查點擊範圍。

## 摘要

- 目標大小不是只看視覺上的圖示大小，也要看實際可點擊或可觸控的區域。
- 目標太小或太密集，會讓手部操作困難、螢幕放大或行動裝置使用者更容易誤觸。
- 設計與工程應一起確認按鈕、連結、表單控制項與圖示按鈕的可操作範圍。

## 為什麼目標大小會影響無障礙？

互動元件太小，不只是不方便。對手部顫抖、精細操作困難、使用觸控螢幕、螢幕放大或在移動中操作的人來說，太小的目標會直接造成任務失敗。

常見問題包括圖示按鈕可點區域太小、相鄰連結太近、表單控制項難以選取、行動版列表每列互動區域不足。

## 24 與 44 CSS px 是不同等級

WCAG 2.2 的 2.5.8（AA）要求指標輸入的目標至少 24 × 24 CSS px，或符合間距、同頁等效控制項、行內目標、未修改的使用者代理控制項、必要呈現等例外。CSS px 不是裝置實體像素；這項要求不限於觸控螢幕。

間距例外不是「一律留 24px 空隙」。以不足尺寸目標的邊界框中心畫直徑 24 CSS px 的圓，不能與其他目標，或另一個不足尺寸目標的同類圓相交。需檢查周圍所有目標。

2.5.5（AAA）是至少 44 × 44 CSS px，另有自己的例外，不能套用 AA 的間距例外。較大的目標也不會自動解決可及名稱、鍵盤操作或焦點問題。

## 檢查時不要只看圖示

設計稿上的圖示可能只有 16 或 20px，但實際按鈕可以透過 padding 提供更大的可操作區域。反過來說，視覺看起來像大按鈕，也可能只有文字本身可點。

因此檢查時要看 DOM、CSS、可點擊範圍、相鄰間距與鍵盤焦點外觀，而不是只看畫面尺寸。

## UI Kit 與 DevCheck 的關係

UI Kit 的價值在於把常見互動元件的基本尺寸、狀態與鍵盤行為做成一致模式，降低每個專案重複犯錯的機會。

DevCheck 則適合在目前頁面做初步檢查，協助需要檢查頁面的人發現觸控目標、焦點與互動狀態是否值得人工確認。

## 常見問題

### 只要按鈕看起來夠大就可以嗎？

不一定。需要確認實際可操作區域、相鄰元件距離與不同輸入方式下的操作結果。

### 目標大小只影響手機嗎？

不是。滑鼠、觸控板、觸控螢幕、螢幕放大與手部操作困難都可能受到目標大小影響。

## 相關頁面

- [安排 WCAG 檢查項目](https://accesserty.com/guides/wcag-testing-checklist/)
- [查看焦點提示的 AA／AAA 差異](https://accesserty.com/glossary/focus-indicator/)
- [使用元件並確認實際點擊區域](https://accesserty.com/uikit/)

## 參考資料

- [W3C WCAG 2.2 - Target Size (Minimum)](https://www.w3.org/TR/WCAG22/#target-size-minimum)
- [W3C Understanding Target Size](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
- [W3C：目標尺寸（AAA）](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html)