移动端HTML可访问性核心在于语义结构、DOM深度≤6层、触摸目标≥48×48px；必须用<button>等原生标签替代<div>，禁用role="button"，完整配置viewport，真机测试VoiceOver焦点流。
移动端HTML可访问性不是加几个aria-label就能解决的事，核心矛盾在于：手指点不准 + 屏幕阅读器“摸不到” + 触摸事件链太长。不改语义结构、不控DOM深度、不设真实可触尺寸，所有ARIA补丁都是临时止痛。
必须用原生语义标签替代点击区域
把<div class="btn" onclick="submit()"></div>换成<button></button>不是为了好看，是让VoiceOver能识别它、键盘能聚焦它、触摸能触发touchstart且无延迟。常见错误现象包括：双指滑动时焦点跳过某个“按钮”，或点下去没反馈但JS逻辑实际执行了——这说明DOM存在，但语义缺失。
- 所有带交互行为的容器，必须用
<button></button>、<a href></a>、<input type="checkbox">等原生可聚焦标签
-
<label></label>必须显式包裹<input type="checkbox">，或用for属性绑定id，否则点击文字区域无法触发切换
- 禁用
role="button"伪装：它不支持键盘Enter/Space、不触发:active、在部分WebView中完全失效
触摸目标必须满足48×48 CSS像素，且不可靠padding撑
CSS像素尺寸 ≠ 实际可触区域。浏览器会按clientWidth × clientHeight判断是否可达标，而这个值受transform、scale、overflow: hidden影响。仅靠font-size: 12px; padding: 8px拼出的按钮，实测常低于44×44，VoiceOver焦点环直接跳过。
- 图标按钮如
<button><svg></svg></button>，必须显式设min-width: 48px; min-height: 48px;
- 相邻可触元素间距至少
8px，否则iOS VoiceOver滑动切换焦点时易连跳
- 用Chrome DevTools的「Toggle device toolbar」+「Inspect」实时测渲染尺寸，别信设计稿标注
DOM深度不能超过6层，否则touchstart延迟飙升
事件冒泡路径越长，touchstart从最内层传到监听器的时间越久。低端安卓机上，body > div > div > div > div > div > button这种6层结构，平均延迟42ms；而<main><nav><button></button></nav></main>三层结构稳定在8–12ms。
Article To Html
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
下载
立即学习“前端免费学习笔记（深入）”；
- 用Chrome DevTools → Elements面板右键任意元素 →「Show DOM properties」查
depth值，超6就该重构
- 避免为加class或JS选择器套
<div>：改用<code>display: contents（Safari 15.4+支持）抹除无意义包裹层
- 动态插入菜单项时，用
DocumentFragment批量append，别循环appendChild——每次调用都可能触发layout
viewport配置缺一不可，user-scalable=no不是可选项
漏掉initial-scale=1.0或user-scalable=no，会导致300ms延迟和缩放抖动。这不是体验问题，是底层事件机制被干扰：浏览器要等300ms确认用户是不是要双击缩放，才把click转成touchend，而touchstart本身也因视口未锁定而失准。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">必须完整写进
- 禁用
-webkit-touch-callout: none防长按弹窗，但别滥用touch-action: manipulation——它会禁用所有滚动，破坏可访问性
- 真机测试时，务必开启VoiceOver/TalkBack，观察焦点顺序是否与视觉流一致；DOM顺序错乱比样式错位更致命
最常被忽略的是：可访问性修复不能只在CSS或JS里做。语义标签、DOM层级、viewport配置这三件事，必须在HTML源码第一层就定死。后续任何ARIA或JS补丁，都只是在弥补源头缺陷。
把<div class="btn" onclick="submit()"></div>换成<button></button>不是为了好看，是让VoiceOver能识别它、键盘能聚焦它、触摸能触发touchstart且无延迟。常见错误现象包括：双指滑动时焦点跳过某个“按钮”，或点下去没反馈但JS逻辑实际执行了——这说明DOM存在，但语义缺失。
- 所有带交互行为的容器，必须用
<button></button>、<a href></a>、<input type="checkbox">等原生可聚焦标签 -
<label></label>必须显式包裹<input type="checkbox">，或用for属性绑定id，否则点击文字区域无法触发切换 - 禁用
role="button"伪装：它不支持键盘Enter/Space、不触发:active、在部分WebView中完全失效
触摸目标必须满足48×48 CSS像素，且不可靠padding撑
CSS像素尺寸 ≠ 实际可触区域。浏览器会按clientWidth × clientHeight判断是否可达标，而这个值受transform、scale、overflow: hidden影响。仅靠font-size: 12px; padding: 8px拼出的按钮，实测常低于44×44，VoiceOver焦点环直接跳过。
- 图标按钮如
<button><svg></svg></button>，必须显式设min-width: 48px; min-height: 48px; - 相邻可触元素间距至少
8px，否则iOS VoiceOver滑动切换焦点时易连跳 - 用Chrome DevTools的「Toggle device toolbar」+「Inspect」实时测渲染尺寸，别信设计稿标注
DOM深度不能超过6层，否则touchstart延迟飙升
事件冒泡路径越长，touchstart从最内层传到监听器的时间越久。低端安卓机上，body > div > div > div > div > div > button这种6层结构，平均延迟42ms；而<main><nav><button></button></nav></main>三层结构稳定在8–12ms。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 用Chrome DevTools → Elements面板右键任意元素 →「Show DOM properties」查
depth值，超6就该重构 - 避免为加class或JS选择器套
<div>：改用<code>display: contents（Safari 15.4+支持）抹除无意义包裹层 - 动态插入菜单项时，用
DocumentFragment批量append，别循环appendChild——每次调用都可能触发layout -
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">必须完整写进 - 禁用
-webkit-touch-callout: none防长按弹窗，但别滥用touch-action: manipulation——它会禁用所有滚动，破坏可访问性 - 真机测试时，务必开启VoiceOver/TalkBack，观察焦点顺序是否与视觉流一致；DOM顺序错乱比样式错位更致命
viewport配置缺一不可，user-scalable=no不是可选项
漏掉initial-scale=1.0或user-scalable=no，会导致300ms延迟和缩放抖动。这不是体验问题，是底层事件机制被干扰：浏览器要等300ms确认用户是不是要双击缩放，才把click转成touchend，而touchstart本身也因视口未锁定而失准。
最常被忽略的是：可访问性修复不能只在CSS或JS里做。语义标签、DOM层级、viewport配置这三件事，必须在HTML源码第一层就定死。后续任何ARIA或JS补丁，都只是在弥补源头缺陷。
