解决深层嵌套的多步骤表单下HTML代码质量与DOM节点控制方案

多步骤表单中嵌套 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> + <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。