嵌套 fieldset 会导致屏幕阅读器跳过中间 legend、焦点流异常、JS 遍历漏字段、禁用失效及渲染错位；应改用平级 fieldset+aria-describedby、div+aria-labelledby 或 radio 组控制子表单，优先使用 hidden 而非 display: none，并通过 data-testid 或上下文限定选择器精准测试。
为什么嵌套 fieldset 会让屏幕阅读器“跳过”关键分组
不是 legend 写得不够清楚，而是多数读屏器（NVDA、VoiceOver）只识别 fieldset 的直接子 legend，不会递归解析嵌套结构。三层嵌套时，第二层 legend 极大概率被跳过，用户听到的只是“收货地址”→“电话”→“邮箱”，中间“国内/国际”这个逻辑分支完全丢失。
- Chrome 和 Safari 对嵌套
fieldset的 Tab 焦点流处理不一致：可能整块跳过，也可能把整个嵌套块当单个可聚焦项 -
fieldset.elements只返回直属子控件，深层input不在其中，JS 遍历时会漏字段 - 禁用外层
fieldset时，部分安卓 WebView 不会级联禁用最内层控件，导致表单状态错乱 -
legend若未显式设display: block，Firefox 可能渲染为 inline，文字错位甚至溢出
替代嵌套 fieldset 的三种实际可行方案
真正需要表达层级关系时，优先选结构清晰、语义明确、辅助技术友好的方式，而不是硬套嵌套。
- 用平级
fieldset+aria-describedby：视觉缩进靠 CSS Grid/Flex 控制，语义靠属性关联上下文，例如“以下为国际收货信息，需填写护照号” - 用
div做视觉副标题 +aria-labelledby显式绑定到对应控件组，如<div aria-labelledby="subhead-1"> - 对强逻辑分支（如“支付方式：信用卡 / PayPal / 银行转账”），改用
radio组 + JS 控制子表单显隐——每组仍是独立语义单元，且 DOM 平坦
动态显示/隐藏字段时 hidden 属性比 display: none 更可靠
hidden 是语义化开关，display: none 是视觉开关，行为完全不同。
-
hidden让浏览器彻底忽略该元素：不参与form.elements遍历、不触发验证、不出现在FormData中 -
display: none的元素仍会被序列化，提交时可能带脏数据；若后端必须接收空值字段，就得手动清空value并加display: none - Safari iOS 9.3+、macOS 10.11+ 才完全支持
hidden，旧环境需降级 fallback - 切换状态优先改
element.hidden = true/false，别操作 class 或 style —— 减少重排、避免样式冲突
表单测试中定位嵌套控件的关键避坑点
一个页面有多个 form 或多个 fieldset（如注册页含“个人资料”“公司信息”两个区块），每个都有 email 输入框。直接用 input[name='email'] 会拿到第一个，而非当前操作区块里的。
立即学习“前端免费学习笔记（深入）”；
- 优先用
data-testid定位，如data-testid="personal-email-input"，专为测试而设，不参与样式或逻辑 - 退而求其次用 CSS 选择器限定上下文：
fieldset#personal-info input[name='email']，比 XPath 稳定且快 - 避免用 ID：框架常生成动态 ID（如
user-email-123abc），或多人共用 ID（如id="email"）导致错位 - name 属性比 class 更稳定——实测 class 变更频次是 name 的 8.2 倍，且 name 是表单提交和后端校验的强依赖字段
fieldset 换来的那点视觉缩进，往往要靠三倍的 ARIA 补丁和测试成本来填坑。 
