没加viewport标签或写错，可访问性测试基本白做——它是移动端可访问的前提，而非加分项；lighthouse报“tap targets not sized appropriately”主因是html层热区未撑开，如label用inline却无min-width/padding、div模拟按钮缺role="button"和tabindex="0"、checkbox与label的for/id不一致、outline:none未补:focus-visible等。
没加 viewport 标签或写错，可访问性测试基本白做——它不是“加分项”，而是移动端可访问的前提。
为什么 Lighthouse 的 “Tap targets are not sized appropriately” 总报错
这个提示不是说按钮太小，而是 HTML 层面的点击热区根本没撑开。常见原因包括：
-
label用了display: inline但没设min-width或padding，窄屏下文字折行导致实际可点区域只剩几个像素 -
div+onclick模拟按钮，却没加role="button"和tabindex="0"，屏幕阅读器无法识别、键盘 Tab 也无法聚焦 -
input[type="checkbox"]和label的for与id不一致（大小写、空格、连字符错一位都不行），点击 label 无法触发选中 - CSS 里写了
outline: none却没补:focus-visible，键盘用户失去焦点指示，WCAG 2.4.7 失效
移动端真机测试时哪些 HTML 结构问题 DevTools 看不见
浏览器模拟器不解析 HTML 合法性，但真实设备会强制修正 DOM，造成可访问性断裂：
- 非法嵌套如
<p></p> <div>内容</div>→ 浏览器自动闭合<p></p>，<div> 被踢到段落外，ARIA <code>aria-labelledby指向失效 -
section、nav、header这类语义化标签被 JS 动态替换为div，但未同步更新role和aria-*属性，VoiceOver/SpeakBack 读不出结构 - 用
display: none隐藏辅助文本（如“仅屏幕阅读器可见”），但没加aria-hidden="true"，某些安卓 WebView 仍会朗读 -
img缺alt或alt=""但实际含关键信息（如验证码图、图标按钮），Lighthouse 不报错，但盲人用户完全无感知 - 在真机 Safari 中打开页面 → 设置 → 辅助功能 → 开启“语音控制”或“旁白”，直接听一遍导航顺序；若跳过
nav、卡在空div、读不出按钮文案，就是 HTML 语义或 ARIA 缺失 - Chrome DevTools → ⚙️ Settings → Preferences → Accessibility → 勾选 “Show accessibility tree”，展开后看
name、role、states是否完整；特别检查aria-expanded是否随抽屉菜单开关实时更新 - 终端执行：
curl -s http://localhost:8000 | tidy -asxhtml -accessibility-check 1 2>/dev/null | grep -i "error\|warning"，能立刻发现alt缺失、label未绑定、tabindex乱序等硬伤
怎样快速验证 HTML 层是否破坏了可访问流
不用等整站跑完审计，三步定位核心断点：
最常被忽略的是：可访问性不是样式层补个 focus-outline 就完事，它从 <meta name="viewport"> 开始，到每个 id 的拼写、每个 role 的存在性、每个 aria- 属性的实时同步，全链路都得对得上。
