标准 · WCAG 2.2

SC 2.5.5 级别 AAA WCAG 2.1

目标尺寸(增强)

交互目标的点击区域应至少为 44×44 CSS 像素。这是 AAA 级别的增强目标尺寸要求;AA 级别的 2.5.8 下限为 24×24。

要求内容

每个交互目标的点击区域至少须达到 44×44 CSS 像素。豁免情形与 AA 级别的成功准则 2.5.8 相同:存在等效目标、内联文本、用户代理控件、必要情形,以及已符合标准的情形。

44×44 这一数值与 Apple、Google 和 Microsoft 各自设计指南中的推荐值一致,因此满足本成功准则通常与平台界面规范相符,而非相悖。

如何满足

  • 为按钮、仅含图标的控件、表单字段及任何点击目标设置 min-width: 44px; min-height: 44px
  • 在小图标按钮内使用内边距,将点击区域扩大至 44×44,即便图标字形本身仅为 16-24px。
  • 优先审计分页控件、面包屑导航、移动端导航、表格行操作图标、标签移除按钮及悬浮操作按钮。
  • 对于视觉上必须较小的控件,应确保其周围有 44×44 的空白区域(该半径内不得有其他目标)。

常见失败

  • 工具栏中 24×24 或 32×32 的图标按钮——满足 AA 但不符合 AAA。
  • 分页行中 30 像素的方块。
  • 密集的表格行操作中,编辑/复制/删除按钮紧挨在一起。
  • 标签移除 × 按钮样式为 12-20px。

重要性

44×44 是使帕金森症、原发性震颤、多发性硬化症及其他运动障碍用户的误触率降至接近零的阈值,也适用于所有在移动中单手使用手机的用户。AAA 级别的成功准则通常不作为合规要求,但银行、政府、医疗等众多受监管行业在移动界面上专门以 AAA 为目标,正是因为移动端对运动障碍用户的影响尤为显著且不成比例。若已满足成功准则 2.5.8,通常只需修改一个 Tailwind 类名,即可将目标尺寸从 24 提升至 44。