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 本身不接管焦点，它只影响控件的归属关系和可访问性树。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 内部控件仍需自己满足可聚焦条件：比如 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 是否还包着该包的东西、键盘流是否还能走通。