按钮点击区域必须≥44×44px，需以content-box尺寸为准；必须用button标签而非div+onclick；图标按钮须配具体aria-label；相邻按钮间距至少8px。
按钮点击区域必须 ≥44×44px，不是“看起来够大”就行
很多团队在移动端测完视觉尺寸就认为按钮“够点了”，结果盲人用户或手指稍大的用户频繁误触或点不中——浏览器计算的是 content-box 尺寸（含 padding，不含 border 和 margin），而设计师常只盯着文字大小或外框。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给
button或a设置min-width: 44px和min-height: 44px，比单靠padding更可靠 - 确保元素是块级或行内块（
display: inline-block或block），避免行内元素因line-height塌陷导致上下可点击区缩水 - 父容器若设了
overflow: hidden，可能裁掉 padding 区域，直接让热区变小——检查 computed styles 中的width和height
用 button 标签，别用 div + onclick
div 绑 onclick 在 VoiceOver 或 TalkBack 下既不进 Tab 流，也不被识别为可操作控件，读出来就是“静态文本”甚至直接跳过。这不是体验问题，是根本不可达。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有触发操作的元素，一律用
<button type="button">；表单提交用type="submit" - 样式自定义走 CSS：
appearance: none、清空border和background，而不是弃用标签 - 禁用
<div tabindex="0" role="button">这类补救写法——它不响应空格键，且 iOS VoiceOver 对role="button"支持不稳定
图标按钮必须带 aria-label，不能只靠视觉符号
纯 SVG 或字体图标没有文本内容，屏幕阅读器无法播报意图。比如一个垃圾桶图标，不加说明，用户听到的可能是“空白”或“svg 元素”，完全不知道功能。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写成
<button aria-label="删除这条评论"><svg>...</svg></button>，不要只写aria-label="删除"—— 缺少宾语易歧义 - 如果按钮内有可见文字（如“删除”+图标），仍建议加
aria-label，因为部分阅读器会合并读取，优先读aria-label而非 innerText，确保意图明确 - 避免用
title属性替代aria-label——title在移动设备上基本不触发，且无键盘支持
触摸目标间距不足，等于隐形误触陷阱
两个 44×44px 的按钮紧挨着，手指一按就容易同时覆盖两个热区。WCAG 明确要求相邻可点击元素之间留出足够间隙，否则等效于缩小了有效尺寸。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 垂直方向至少留
margin-bottom: 8px，水平方向留margin-right: 8px（iOS 推荐最小间距为 8px） - 用
gap控制 flex 或 grid 布局中的按钮间距，比单个margin更可控 - 避免用负 margin 挤压按钮位置——这会让实际热区重叠，Chrome DevTools 的 “Accessibility” 面板能直接标出重叠警告
aria-label，而是没意识到 min-height 和 padding 才是热区的物理边界，以及 button 标签自带的键盘焦点和语义，根本没法用 CSS 补回来。 
