触控目标尺寸

触控目标尺寸是用户可点击或轻触的任意元素的有效操作区域。WCAG 设定了两个阈值：AAA 级最低要求为 44×44 CSS 像素（自 WCAG 2.1 起）；AA 级最低要求为 24×24 CSS 像素（WCAG 2.2 新增）。该准则的设立背景是：运动障碍——乃至在小屏幕上的普通操作不准确——都会使细小目标无法使用。

两项 WCAG 成功准则

• 2.5.5 目标尺寸（增强版）——AAA 级——指针输入目标不得小于 44×44 CSS 像素。此规则由来已久，在全站范围内达标存在一定难度。
• 2.5.8 目标尺寸（最低要求）——AA 级，WCAG 2.2 新增——指针输入目标不得小于 24×24 CSS 像素。这是实际合规的底线要求。

满足 44×44 AAA 级阈值的目标，自然也满足 24×24 AA 级阈值。

规则的实际含义

数字指的是可操作区域，而非仅仅是可见图标的尺寸。Apple 的《人机界面指南》和 Google 的 Material Design 均将默认触控目标尺寸设为 44pt / 48dp，原因相同——背后有真实的人体工学数据支撑。

一种常见模式：图标按钮的 SVG 图形尺寸为 16×16，但通过内边距将可点击区域扩大至 44×44，从而满足规则要求。可见图标较小，但目标区域是图标加上其周围的内边距区域之和。

豁免情形

2.5.8（AA 级准则）有明确的豁免例外：

• 间距豁免。 若目标尺寸至少达到 24×24，或其周围留有足够空白，使相邻目标与其距离不小于 24 CSS 像素，则视为通过。此规定保护了密集的内联布局（如正文中的文本链接）——这类目标的可操作区域较小，但彼此间距足够，不会误触相邻目标。
• 其他控件可实现同等功能。 若同一页面上存在另一个较大的控件可实现相同功能，则较小的目标可豁免。
• 内联目标。 流动文本中的链接豁免——不应为满足每链接 24 像素的规则而重排正文版式。
• 用户代理控制。 浏览器默认控件豁免。
• 本质需要。 当尺寸对功能不可或缺时（例如验证码网格）豁免。

实际生产中的常见问题

三类常见的线上失败案例：

• 仅图标导航按钮尺寸为 28×28。 除非周围有足够空白（大多数密集导航栏不具备此条件），否则违反 2.5.8。
• 紧密排列的复选框列表。 复选框绘制尺寸为 16×16 且无内边距，纵向紧密排列且无间距。目标尺寸和间距均不达标。
• 移动端轮播图的”上一张/下一张”箭头。 通常绘制为 32 像素的尖括号加 4 像素内边距，违反 2.5.8。

最快速的手动审计方法

在任意移动端模拟视口中打开开发者工具，检查每个可交互元素，记录其边界框。任何在任一维度上小于 24 CSS 像素且相邻目标距离在 24 CSS 像素以内的元素，均违反 2.5.8。

大多数团队会在组件中采用统一的触控目标尺寸设计令牌——无论可见尺寸如何，每个可交互元素至少获得 44×44 的点击区域。这是将该规则化为无形的最低成本方案。