fieldset 和 legend 是无障碍必需的，因为它们通过隐式 role="group" 和天然关联为屏幕阅读器提供语义分组，使用户理解控件逻辑关系；legend 必须是 fieldset 的首个子元素且不可隐藏或嵌套过深，原生 fieldset 还支持 tab 导航和批量禁用，优于 div + aria 模拟方案。
fieldset 和 legend 为什么是无障碍必需的
没有 fieldset 和 legend 的表单分组，对屏幕阅读器用户来说就是一堆散落的控件，无法理解“这 3 个复选框属于‘通知偏好’”这类语义关系。浏览器和读屏软件靠 fieldset 的隐式 ARIA role="group" 和 legend 的天然关联，把一组控件绑定成一个逻辑单元。
正确写法：legend 必须是 fieldset 的第一个子元素
这是最常踩的坑——把 legend 放在 fieldset 里但不是第一个子节点，会导致部分读屏（如 NVDA + Firefox）无法将其识别为该组的标题。
正确结构示例：
-
legend必须直接子元素，不能套div或span - 不要用 CSS 隐藏
legend（比如display: none），可用clip-path或position: absolute配合overflow: hidden实现视觉隐藏但保留可访问性 - 如果需要图标或额外装饰，用伪元素或
svg，别破坏legend的文本内容完整性
嵌套 fieldset 的兼容性风险
虽然 HTML 允许 fieldset 嵌套，但 JAWS 和某些旧版 VoiceOver 对多层嵌套的解析不稳定，容易跳过内层 legend 或混淆层级。
- 优先用单层
fieldset+ 清晰的legend文本表达分组意图 - 若必须嵌套（例如“支付方式”下再分“银行卡”和“PayPal”），确保每层都有
legend，且文本简洁无歧义 - 避免在
legend里放交互控件（如按钮、开关），会干扰焦点流和读屏顺序
替代方案不可取：div + aria-labelledby 不等于 fieldset
有人试图用 div 加 role="group" 和 aria-labelledby 模拟，但实际效果差很多：
- 键盘导航时，
fieldset支持原生 Tab 进入/退出整组（配合legend自动获得焦点锚点），而div组需手动管理焦点 - 部分读屏（尤其是 iOS VoiceOver）对非原生
fieldset的支持不一致，legend的语义权重远高于任意aria-labelledby引用的元素 - 表单提交时，
fieldset的disabled属性会自动禁用所有内部表单控件；div方案得逐个设置disabled，极易遗漏
能用原生 fieldset 就别绕路——它不是“可选增强”，而是分组语义的基础设施。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
