标准 · WCAG 2.2

SC 2.5.8 级别 AA WCAG 2.2 2.2 版新增

目标尺寸(最低要求)

交互目标——按钮、链接、表单控件——必须至少为24×24 CSS像素,除非同一页面上有等效的足够大的目标,或目标位于句子中。此为WCAG 2.2新增内容。

要求内容

页面上每个交互控件的点击区域至少必须为24×24 CSS像素——或者其周围有足够的间距,使以目标为圆心、半径24像素的圆不会与其他目标相交。其目的是防止精细运动控制能力有限、有震颤症状或在移动中使用触屏的用户错过目标并触发错误操作。

WCAG 2.2将最低要求设定为24×24;现有的AAA级成功准则 2.5.5 保持了更严格的44×44目标要求。

如何满足此准则

  • 为仅有图标的按钮、关闭按钮以及任何小于典型按钮的点击目标设置至少24px的 min-width / min-height
  • 对于段落内的内联链接,可豁免——该成功准则明确允许”位于句子中”的目标。
  • 对于图标行(工具栏按钮、表格行操作),使用内边距将点击区域扩展至24×24,即使图标字形更小也应如此。
  • 对于视觉上必须保持较小尺寸的控件(如标签片上的小”×”),添加外边距/间距缓冲,使相邻目标的中心点之间至少相距24px。
  • 优先审计分页、面包屑导航、表格行操作和工具栏图标——这些是常见失败情形的集中区域。

常见失败情形

  • 16×16的图标按钮(关闭、编辑、删除)无内边距,尤其常见于表格和工具栏。
  • 紧凑的分页行,其中”上一页/1/2/3/下一页”挤在18px的方框内紧密排列。
  • 出于”极简主义”原因,自定义复选框/单选按钮被样式化为小于原生控件。
  • 移动端的浮动操作按钮超过24×24,但与其他点击目标距离过近。
  • 标签移除”ד按钮尺寸为10–14像素——在基于标签片的筛选界面中极为常见。

值得了解的豁免情形

该成功准则有五项例外:等效(同一页面上有执行相同功能的更大目标)、内联(位于句子中)、用户代理控制(浏览器默认样式,如原生 <select>)、必要(较小尺寸是传达信息所必需的,如地图图钉)以及符合(更通用的规则强制要求该尺寸——较为罕见)。

重要性

目标尺寸失败情形在移动端测试中以及对帕金森病、原发性震颤、多发性硬化症患者,或任何在车厢中单手使用触屏的用户中尤为突出。从2.1版本的”无最低要求”到2.2版本的24×24下限,这一变化让大多数在产品环境中运行的网站措手不及——预计这将是2026年审计中引用最多的新成功准则。