多步骤表单中嵌套 fieldset 会丢字段、跳焦点，因浏览器和读屏器不支持三层以上嵌套：nvda/voiceover 仅识别直接子 legend，chrome/safari 焦点流异常，fieldset.elements 不包含深层 input；应改用平级 fieldset+aria-describedby、div+aria-labelledby 或 radio 控制显隐，并优先使用 hidden 而非 display: none。
为什么多步骤表单里嵌套 fieldset 会丢字段、跳焦点
不是写法错了，而是浏览器和读屏器根本不支持三层以上 fieldset 嵌套。NVDA 和 VoiceOver 只识别直接子级的 legend，第二层 legend 几乎必然被跳过；Chrome 的 Tab 焦点流可能整块跳过，Safari 则可能把整个嵌套块当一个可聚焦项。更致命的是：fieldset.elements 只返回直属子控件，深层 input 根本不在里面——JS 遍历时直接漏掉。
常见错误现象：
- 用户听到“收货地址”→“电话”→“邮箱”，中间“国内/国际”分支完全消失
-
document.querySelector('form').elements拿不到嵌套里的input - 禁用外层
fieldset后，安卓 WebView 里内层控件仍可操作
替代嵌套 fieldset 的三种实操方案
真正需要表达逻辑层级时，语义清晰比结构“看起来嵌套”重要得多。
- 用平级
fieldset+aria-describedby：视觉缩进靠display: grid或flex控制，语义靠属性关联上下文，例如<fieldset aria-describedby="desc-intl"><legend>国际信息</legend></fieldset>+<p id="desc-intl">需填写护照号</p> - 用
div做视觉副标题 +aria-labelledby：比如<div aria-labelledby="subhead-1"><input name="passport"></div>，并确保id="subhead-1"对应的元素是文本节点或带文本的标签 - 强逻辑分支（如支付方式）改用
radio组 + JS 控制显隐：每组保持独立语义单元，DOM 平坦，form.elements可靠，无障碍也明确
动态切换步骤时，hidden 比 display: none 更可靠
hidden 是语义开关，display: none 是视觉开关，行为完全不同。
-
hidden的元素不参与form.elements遍历、不触发验证、不出现在FormData中 -
display: none的元素仍会被new FormData(form)序列化，提交时可能带脏数据 - Safari iOS 9.3+、macOS 10.11+ 才完全支持
hidden，旧环境需降级：if ('hidden' in document.createElement('div')) { el.hidden = true; } else { el.style.display = 'none'; } - 切换状态优先改
element.hidden = true/false，别操作 class 或 style —— 减少重排、避免样式冲突
多个 form 或 fieldset 共存时，定位控件必须加上下文限定
一个页面有“个人资料”“公司信息”两个区块，每个都有 email 输入框。直接用 input[name='email'] 会拿到第一个，根本不确定是哪一步的值。
- 用
data-step或data-section加限定：form[data-step="2"] input[name="email"] - 测试时优先用
data-testid而非 class 或 name：input[data-testid="step2-email"] - JS 封装函数里统一走
updateField(step, name, value)，内部用上下文 selector 查找，避免全局污染 - 不要依赖
formdata事件跨表单监听——它只对当前form有效，且无上下文标识
深层嵌套最危险的地方不是渲染慢，而是 DOM 查找失效、状态不同步、辅助技术不可达——这些问题在开发阶段几乎不报错，上线后才集中爆发。控制节点深度，本质是控制 JS 操作边界和语义可达性，而不是单纯删 div。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
