fieldset 必须包含作为首个子元素的可见文字 legend 才能被屏幕阅读器识别，禁用空 legend 或隐藏它；内部控件需自身可聚焦，disabled 的 fieldset 会继承禁用所有子控件；css 重置时须保留视觉分组提示。
怎么用 fieldset 和 legend 包裹表单控件才不被忽略？
浏览器默认会把 fieldset 当作一个语义化容器，但如果不配 legend，屏幕阅读器可能直接跳过整个区域，等于白写。不是“加了就有效”，而是“加对了才有用”。
-
legend必须是fieldset的第一个子元素，放后面或用display: none隐藏都会破坏可访问性 - 不要用空格、
<legend><span aria-hidden="true">⚙️</span></legend>不算有效标签 - 如果视觉上真不需要标题文字，可用
aria-label在fieldset上补充，但优先写可见的legend
fieldset 里能放哪些控件？哪些会出问题？
它本意是分组表单控件，但不是所有 HTML 元素都适合塞进去。放错东西会导致语义断裂或 JS 行为异常。
- 推荐：所有原生表单控件 ——
input、select、textarea、button、output - 谨慎：自定义组件（如用
div模拟的开关），必须手动加role="group"和aria-labelledby指向legend - 避免：
form标签嵌套在fieldset内 —— 会触发 HTML5 验证逻辑混乱，提交行为不可预测
为什么用了 fieldset 表单还是不能键盘导航？
常见错觉是“加了语义结构就自动可交互”，其实 fieldset 本身不接管焦点，它只影响控件的归属关系和可访问性树。
- 内部控件仍需自己满足可聚焦条件：比如
input要有name属性，button不能加disabled，div类控件得加tabindex="0" -
fieldset被设disabled时，所有子控件会继承禁用状态 —— 这是特性不是 bug，但容易误以为“只是样式变灰了” - Chrome/Firefox 对
legend点击聚焦首个可聚焦子元素的支持不一致，别依赖这个做交互逻辑
CSS 样式重置时最容易破坏什么？
很多人一上来就 fieldset { border: none; padding: 0; }，结果发现语义没丢，但视觉层级和辅助技术理解全乱了。
- 别删
border后不补替代视觉边界 —— 至少保留outline或用box-shadow暗示分组关系 -
legend默认是块级且带 margin，重置时若清掉所有 margin/padding，可能让它紧贴控件顶部，失去标题感 - 某些旧版 Safari 会把
legend的position: absolute渲染失效，建议用flex或grid布局微调位置而非绝对定位
legend 是否还挂着、fieldset 是否还包着该包的东西、键盘流是否还能走通。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
