fieldset必须配legend才有效，legend必须是其第一个子元素，否则语义断裂、可访问性失效、wcag不合规；这是浏览器和读屏软件的硬性解析规则，非建议。
直接说结论：fieldset 必须配 legend 才算有效，legend 必须是 fieldset 的第一个子元素，否则语义断裂、可访问性失效、WCAG 不合规——这不是“建议”，是浏览器和读屏软件的硬性解析规则。
为什么 legend 必须紧贴 fieldset 开头
屏幕阅读器（如 NVDA、VoiceOver）靠 DOM 顺序把 legend 文本绑定为整组控件的可访问名称。位置错，就等于没写。
-
<fieldset> <div><legend>地址</legend></div> <input name="city"> </fieldset>→legend被包裹，读屏器跳过，只报“编辑框” -
<fieldset> <input name="zip"><legend>地址</legend> </fieldset>→legend不是首子节点，旧版 Safari 可能完全不播报 - React 中用
Fragment或自定义 wrapper 包legend，也会破坏直接父子关系，语义丢失
fieldset[disabled] 真实禁用所有子控件，但有边界
加 disabled 属性不是“加个灰样式”，而是递归禁用所有直属子级表单控件（input、select、textarea、button），并自动排除在 FormData 提交之外。
- 被禁用的
input值默认不提交，哪怕你 JS 改了value - 它不影响嵌套在
div或p里的控件——这是特性，不是 bug；若需深层禁用，得靠 JS 或额外逻辑 -
legend文字会变灰，但它仍是可点击的（除非你加了pointer-events: none），别误以为“点了没反应=失效”
CSS 重置时最容易破坏的三个视觉线索
删掉默认边框和内边距后，用户完全看不出哪块是一组。视觉分组提示必须由你主动补上。
- 清掉
border后，至少保留outline: 2px solid #999或box-shadow: inset 0 0 0 1px #ccc，否则键盘导航时焦点框无处附着 -
legend默认有margin-bottom，全清掉会让标题紧贴控件顶部；建议只设legend { margin: 0.5em auto 0.75em; } - 在
display: flex容器里放fieldset，legend容易偏移或被裁剪；不要对legend设display: flex，改用display: inline-flex+align-items: center
UI 框架可能悄悄剥离 fieldset 和 legend
Bootstrap、Ant Design 这类框架喜欢用 CSS Grid/Flex 模拟分组，它们的表单组件常在渲染时移除或忽略你写的 fieldset 和 legend。
- 结果就是：你写了，但 DOM 里没有；语义丢了，可访问性也断了
- 务必打开开发者工具，确认
fieldset和legend真实存在于最终渲染的 HTML 中 - 动态插入
fieldset后，要确保legend节点已挂载，否则初始无障碍树可能不完整
真正难的不是第一次写对，而是在后续迭代中——比如加个新控件、换套 CSS、抽离 React 组件时，始终记得检查：legend 还在不在第一位置？fieldset 还包着该包的东西吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
