用 fieldset 和 legend 可提升大表单在辅助设备下的导航效率——通过提供可被准确识别的语义化分组结构，使屏幕阅读器理解控件逻辑归属、支持快捷跳转、同步禁用与验证状态，并在样式优化中不破坏语义链路。
用 fieldset 和 legend 提升大表单在辅助设备下的导航效率，核心在于提供**可被准确识别的语义化分组结构**——不是“看起来像分组”，而是让屏幕阅读器真正“理解”哪几个控件属于同一逻辑单元，并能一键跳转、上下文连贯地播报。
让每组控件自带上下文名称
legend 是该分组的可访问名称（accessible name），屏幕阅读器进入 fieldset 时，会先朗读 legend 文本，再依次播报内部控件。例如：
- 用户听到：“收货地址，组。收件人，编辑框。” 立刻知道接下来要填的是地址相关字段；
- 若没有
legend，只听到：“编辑框。编辑框。下拉列表。” 完全丢失归属关系，尤其在 20+ 字段的表单中极易迷失； -
legend必须是fieldset的第一个子元素，位置错位（如被div包裹、或后面还有其他元素）会导致读屏器跳过它，等同于没写。
支持结构化快捷导航
主流屏幕阅读器（NVDA、VoiceOver、JAWS）原生支持 fieldset 作为导航单元：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 用户可用快捷键（如 NVDA + Shift + ↓）直接跳到下一个
fieldset，无需逐个 Tab； - 聚焦组内任一控件时，
legend文本仍会作为上下文重复提示（如：“电话，编辑框。所属分组：联系方式。”）； - 这种“组→控件”两级结构大幅降低键盘用户的操作步数和认知负担，比纯线性 Tab 导航快 3–5 倍。
禁用与验证状态天然同步
对整组控件启用/禁用或标记错误，无需 JS 操作每个元素：
- 给
fieldset加disabled属性，其所有直属表单控件（input、select、textarea、button）自动禁用且不参与提交； - 表单验证失败时，把错误提示放在
fieldset内底部（而非legend后紧挨着），屏幕阅读器会在播报完所有控件后自然读到该提示，上下文完整； - 避免用
div模拟分组后手动管理禁用或 ARIA 状态——易出错、不可靠，且不被旧版读屏器兼容。
样式优化不破坏语义链路
视觉美化必须保留可访问性基础：
- 清除默认边框后，务必补上视觉分隔（如
border: 1px solid #e0e0e0或box-shadow: inset 0 0 0 1px #ccc），否则键盘焦点无处附着； - 调整
legend位置时，避免用display: flex或position: absolute破坏其与fieldset的语义绑定； - 若需隐藏
legend视觉显示（如仅用图标），用visually-hidden类（CSS 中设position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;），确保它仍在 DOM 中且可被读取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
