fieldset 和 legend 是表单模块化的语义锚点，非视觉分隔工具；legend 必须为 fieldset 的第一个子节点，否则屏幕阅读器可能跳过；disabled 仅作用于直接子控件，不穿透嵌套容器；空 fieldset（无聚焦控件）将丧失语义。
直接说结论：fieldset 和 legend 不是“视觉分隔工具”，而是表单模块化的语义锚点——没它，键盘用户 Tab 十几次才能搞清哪几个字段属于“发票信息”，屏幕阅读器只会平读“输入框、输入框、下拉框”，完全丢失上下文。
legend 必须是 fieldset 的第一个子元素，空格和注释也算违规
浏览器解析时，把换行、缩进、HTML 注释都当真实节点。哪怕你写成：
这个 legend 就不是第一个子节点，部分读屏器（如旧版 NVDA）会跳过它，等同于没写。React/Vue 中用 v-if 或 {condition && <legend>}</legend> 也容易在它前面插入文本节点。
- 实操建议：写成单行或确保
legend紧贴fieldset开始标签，中间无任何字符 - 验证方式：用 Chrome DevTools 查看 DOM 树，确认
legend是fieldset的第一个 childNode - 别用
<legend><span>标题</span></legend>—— 内嵌标签会干扰可访问性名称提取
fieldset disabled 只禁用直属子控件，嵌套 div 里的 input 不受影响
fieldset 的 disabled 属性是原生行为，但作用域有明确限制：只影响它的**直接子级**表单控件（input、select、textarea、button），不穿透 div 或 section。
常见错误写法：
结果：input 依然可聚焦、可选中、提交时值仍存在。
- 正确做法：把
input放到fieldset下一级，或改用 JS 控制状态 -
input type="hidden"永远不受fieldset disabled影响，这是规范行为，不是 bug - 别用
pointer-events: none或opacity: 0.5模拟禁用——它们不阻止键盘交互，也不排除提交值
多组 fieldset 切分复杂表单时，每组必须含至少一个可聚焦控件
只包 p、div 或纯提示文字的 fieldset，浏览器可能忽略其语义，甚至不渲染默认边框。它需要“被激活”——即至少一个能接收焦点的表单控件。
典型误用：
这段代码 WCAG 会报“空分组”，读屏器可能跳过整个 fieldset。
- 有效子元素包括：
input、select、textarea、button、radio/checkbox组 - 如果真只需要展示说明，用
div+aria-labelledby更稳妥 - 注册页常见分组：
<fieldset> <legend>基本信息</legend>...</fieldset>、<fieldset> <legend>隐私偏好</legend>...</fieldset>
样式重置时别破坏 legend 与 fieldset 的语义绑定
清除默认边框后，必须补上视觉分隔；调整 legend 位置时，避免用 display: flex 或 position: absolute 断开它和 fieldset 的渲染关系。
- 安全做法：用
fieldset { border: 1px solid #e0e0e0; padding: 12px; }+legend { margin-left: 8px; } - 视觉隐藏
legend时，禁用display: none或visibility: hidden，改用visually-hidden类（position: absolute; clip: rect(1px, 1px, 1px, 1px)） - 别把
fieldset塞进table的td里——部分浏览器解析异常，需外层加div
最常被忽略的点：很多人以为只要边框还在，分组就成立。其实，一旦 legend 位置错、内容空、或里面套了 h3，语义链路就断了——键盘用户按组跳转失效，读屏器播报失序，连浏览器内置的 autofill 都可能识别错字段归属。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
