fieldset 和 legend 是唯一同时满足语义分组、可访问性命名、原生批量禁用的 html 原生机制；legend 必须是 fieldset 的第一个 childnode，否则屏幕阅读器无法将其作为整组控件的可访问名称。
直接说结论：fieldset 和 legend 是复杂表单中唯一能同时满足语义分组、可访问性命名、原生批量禁用这三件事的 HTML 原生机制；用 div + h3 或 ARIA 模拟，会在键盘导航、读屏播报、表单提交行为上掉链子。
legend 必须是 fieldset 的第一个子节点，否则屏幕阅读器不认
这不是兼容性建议，而是无障碍树构建规则：NVDA、VoiceOver 等读屏器只把 legend 文本作为整组控件的可访问名称（accessible name），前提是它必须是 fieldset 的第一个 childNode。哪怕中间有个换行、空格、HTML 注释，都算违规。
- 错误写法：
<fieldset> <!-- 注释 --><legend>收货地址</legend> <input name="city"> </fieldset>→ 注释是真实节点，legend不再是第一个子节点 - React/Vue 中用
{condition && <legend>...</legend>}也容易在它前面插入文本节点，导致语义断裂 - 验证方式：打开 Chrome DevTools，展开 DOM 树，确认
legend是fieldset下第一个childNode，不是firstElementChild - 视觉隐藏
legend时，可用position: absolute; clip: rect(1px, 1px, 1px, 1px);，但绝不能用display: none或visibility: hidden
fieldset[disabled] 只禁用直属子控件，嵌套 div 里的 input 不受影响
fieldset 的 disabled 属性是原生行为，但作用域非常明确：只递归禁用它的**直接子级**表单控件（input、select、textarea、button），不穿透任何容器元素。
- 错误写法：
<fieldset disabled> <legend>支付方式</legend> <div><input type="radio" name="pay"></div> </fieldset>→input仍可聚焦、可选中、提交时值存在 - 正确做法：把
input提到fieldset下一级，或改用 JS 控制状态 -
input type="hidden"永远不受fieldset[disabled]影响，这是规范行为，不是 bug - 别用
pointer-events: none或opacity: 0.5模拟禁用——它们不阻止键盘交互，也不排除提交值
空 fieldset（无聚焦控件）会丧失语义，浏览器可能忽略它
fieldset 需要“被激活”才有完整语义。只包 p、div 或纯提示文字，浏览器可能不渲染默认边框，甚至在无障碍树中完全跳过该节点。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 典型误用：
<fieldset> <legend>说明</legend> <p>请填写真实信息</p> </fieldset>→ 没有可聚焦控件，语义失效 - 有效子元素包括：
input、select、textarea、button、radio/checkbox组 - 如果真只需要展示说明，改用
div+ CSS 更稳妥 - 多组
fieldset切分复杂表单时，每组必须含至少一个可聚焦控件，否则键盘用户 Tab 十几次都搞不清哪几个字段属于“发票信息”
多个 fieldset 切分复杂表单时，别嵌套，也别堆在一起
注册页、多步骤流程、设置面板等场景，适合按用户认知切分成多个平级 fieldset，每组一个明确主题。嵌套 ≥3 层极易导致 Tab 导航卡死，尤其当某层 legend 缺失或被 CSS 隐藏。
- 推荐分组示例：
<fieldset><legend>登录信息</legend></fieldset>、<fieldset><legend>隐私偏好</legend></fieldset> - 避免一个
fieldset包几十个控件，尤其跨功能模块（比如把“头像上传”和“密码重置”硬塞进同一组） - UI 框架（如 Ant Design、Bootstrap）常在渲染时剥离你写的
fieldset，最终 DOM 中根本不存在 —— 务必在浏览器里 inspect 实际输出 - 样式重置后必须手动补视觉线索：删掉默认边框和内边距后，用户完全看不出哪块是一组，视觉分组提示得由你主动补上
最常被忽略的一点：很多团队以为加了 legend 就万事大吉，其实只要它不是 fieldset 的第一个 childNode，或者里面混了空格/注释/包裹标签，整组就等于没分组——读屏器不会播报组名，键盘用户也感知不到边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
