SuperAPI AI 工具集

touch-targets

通用与其它

查看项目

更新于 10-16 04:30

技能介绍

用途:这是一条前端无障碍检查规则,用于确保触摸屏界面上的所有交互元素(按钮、链接、复选框、单选按钮、表单输入、图标按钮、菜单项等)具有足够的触摸目标尺寸,帮助运动障碍用户(如特发性震颤、帕金森病、偏瘫、痉挛)更准确地点击,同时减少普通用户的误触。

主要能力与标准:依据 WCAG 2.2 SC 2.5.5(AAA)要求触摸目标至少 44×44 CSS 像素;SC 2.5.8(AA,WCAG 2.2 新增)要求至少 24×24 CSS 像素,或与其他目标保持 24px 间距。Apple HIG 建议最小 44×44 pt,Google Material Design 建议最小 48×48 dp。行内文本链接豁免 SC 2.5.8。

检查方式:找出所有交互元素(button、a、input、select、textarea 及带点击/触摸事件或 role='button' 的元素),计算包含内边距的渲染边界框,标记宽或高小于 24px(AA)或小于 44px(AAA/平台指南)的元素,并检查小于 44px 的元素与相邻交互元素之间是否有至少 24px 的净空。

修复方式:在不改变视觉外观的前提下扩大触摸目标,可添加内边距(如按钮 padding: 12px)、使用 min-width 和 min-height 设定下限(如 min-width: 44px; min-height: 44px)、对纯图标按钮用透明伪元素扩展点击区域(.icon-btn::before { content: ''; position: absolute; inset: -12px; },按钮需 position: relative),并确保小目标之间有足够间距。

适用场景与限制:适用于移动端和平板触摸界面的无障碍审查与代码评审。阈值基于人类指尖平均尺寸(约 10mm)及触摸精度,震颤或灵活性受限用户的触点可能偏离目标 20–30px。完整实现细节、代码示例和框架特定指南见 references/rule.md,规则页为 https://frontendchecklist.io/rules/accessibility/touch-targets。