移动端表单可访问性优化与软键盘弹出处理必须同步落地：label需用for/id显式绑定，fieldset+legend实现语义分组，focus事件中调用scrollIntoView({block:'nearest',inline:'nearest'})并配正确viewport标签。
移动端表单可访问性优化和软键盘弹出处理，是两套独立但必须同时落地的机制——前者保障屏幕阅读器、开关控制、语音输入等辅助技术能准确识别和操作控件；后者解决视觉层输入框被键盘遮挡、滚动错位、光标消失等物理交互问题。分开做，一个都救不回来。
label 和 input 必须用 for/id 显式绑定
很多页面“看起来能点”，但 VoiceOver 无法朗读字段名，或点击 label 文字不聚焦输入框，根本原因是没建立浏览器可识别的语义关联。
-
label必须带for属性，且值严格等于对应input的id，比如<label for="phone">手机号</label><input type="tel" id="phone" name="phone"> - 避免隐式包裹写法：
<label>手机号<input name="phone"></label>—— DOM 动态更新、换行或注释插入时极易断开绑定，iOS Safari 和旧版 TalkBack 支持不稳定 - 别用
aria-label或title替代label：它们不会触发点击聚焦，也不能被所有辅助技术解析为“可操作控件标签”
fieldset + legend 是分组逻辑的唯一可靠表达
当出现地址段、偏好设置、多选题等成组字段时，仅靠 CSS 排版或 div 包裹毫无语义价值。屏幕阅读器用户需要知道“这一堆是干什么的”，而 fieldset+legend 是唯一被所有主流辅助技术一致识别的分组机制。
-
legend必须存在，且为纯文本（不推荐仅用图标），它是该组的标题，会被朗读两次：一次进入组时，一次离开组时 - 不要嵌套
fieldset：多层嵌套在 NVDA 和 JAWS 中可能跳过中间层级，导致上下文丢失 - 移动端尤其依赖这个结构：VoiceOver 在“组模式”下会把整组当一个单元滑动，没有
legend就等于没提供上下文
focus 事件里调 scrollIntoView({block:'nearest',inline:'nearest'}) 才真正有效
iOS Safari 在键盘弹出前就触发 focus，此时调用 scrollIntoView 是唯一能“卡准点”的方式；写在 click 或 resize 里，Android 部分机型还没聚焦就滚动，iOS 则可能已错过最佳时机。
立即学习“前端免费学习笔记（深入）”；
- 必须监听每个
input和textarea元素自身的focus事件，不是window的focusin—— 后者捕获的是整个窗口焦点，不是输入框自身 - 参数必须是
{ block: 'nearest', inline: 'nearest' }：只做最小必要滚动，避免光标被顶出视口顶部以外 - 别加
behavior: 'smooth'：微信 X5 内核会静默失败，光标不动也不报错 - 示例：
input.addEventListener('focus', () => { input.scrollIntoView({ block:'nearest', inline:'nearest'}); });
viewport meta 标签写错，JS 就白跑
90% 的“滚动无效”问题，根源是 <meta name="viewport"> 锁死了浏览器对键盘弹出的感知能力。iOS Safari 依赖 visualViewport.height 变化来通知 JS，而这个变化被 user-scalable=no 或缺失 height=device-height 直接屏蔽。
- 必须包含
height=device-height：否则window.innerHeight在键盘弹出后不变，JS 无法判断是否被压缩 - 绝对禁用
user-scalable=no：iOS 会静默禁用 viewport 动态重绘，visualViewport.height永远等于屏幕物理高度 - 推荐写法：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes, height=device-height"> - Android Chrome 对
height=device-height支持弱，但至少不会破坏逻辑；而user-scalable=no在 iOS 上是真·静默杀手，比不写还危险
最常被忽略的一点：软键盘弹出后，blur 时不还原滚动位置，页面就悬在半空——底部留白、顶部内容被裁、再点其他输入框光标直接消失。记录位置不能依赖 document.body.scrollTop（iOS 常为 0），得用 window.scrollY 或 visualViewport?.pageTop，并配合 200ms 防抖执行还原。
