网页中 fieldset 元素内 legend 元素如何作为表单控件的辅助标签
fieldset 元素内的 legend 元素能够为表单组内的所有控件提供统一的辅助标签，帮助屏幕阅读器用户快速识别相关输入项的用途。
如何使用 legend 元素为表单组添加辅助标签
在表单结构中，如果需要将多个输入控件归为一组并赋予统一的描述，应使用 fieldset 元素包裹这些控件，并在其内部使用 legend 元素添加标题。例如，将姓名、年龄和邮箱输入框包裹在 fieldset 中，并在 legend 内写入“Personal data”，这样屏幕阅读器在朗读到该组控件时，会先读出 legend 的内容，再依次读出每个控件的标签。这种结构确保了语义的关联性，使得辅助技术能够准确理解控件的上下文关系。
在具体的代码实现中，需要确保每个输入框都有对应的 label 元素，并且 label 的 for 属性与输入框的 id 属性匹配。同时，legend 元素应紧贴 fieldset 的开始标签，作为该组的第一个子元素。这种写法符合 HTML 规范，能够保证浏览器和辅助技术正确解析表单结构，避免因标签嵌套混乱导致的信息传递错误。
验证 legend 元素是否正确关联表单控件
要验证 legend 元素是否成功作为辅助标签，可以使用浏览器的开发者工具检查 DOM 结构，确认 legend 位于 fieldset 内部且未被其他标签分隔。在 Elements 面板中，选中 fieldset 元素，查看其子元素列表，legend 应该是第一个子元素。此外，可以尝试使用屏幕阅读器浏览页面，当焦点移动到该表单组时，检查是否先听到了 legend 的标题，随后是各个输入框的标签。
另一种验证方法是检查表单提交时的数据结构。如果 legend 仅作为辅助标签，不应出现在提交的数据中。在表单提交后查看网络请求的 payload，确认只有 name 属性对应的值被发送，而 legend 的文本内容未被包含。这表明 legend 仅用于辅助技术识别，不会干扰表单数据的正常传输。
legend 元素与 label 元素在辅助功能上的区别
legend 元素的作用范围是整个 fieldset 组，它为组内的所有控件提供上下文信息，而 label 元素通常针对单个输入控件。例如，在一个包含多个字段的 fieldset 中，legend 可以概括整组数据的用途，而每个 label 则负责解释具体字段的含义。这种分工使得辅助技术能够更高效地处理复杂表单，用户也能更清晰地理解输入项之间的关系。
需要注意的是，legend 不能替代 label 的功能。如果表单中某个控件没有对应的 label，仅依赖 legend 可能会导致该控件的可访问性降低。因此，最佳实践是同时使用 legend 和 label，legend 提供组级描述，label 提供字段级说明，从而兼顾整体结构和细节信息的传递。
避免在 legend 中使用非语义标签的常见错误
在编写代码时，应避免在 legend 元素内部嵌套其他非语义标签，如 div 或 span，这会破坏表单的语义结构。例如，将 legend 写成 `<legend><div>Personal data</div></legend>` 会导致屏幕阅读器无法正确识别该标题，从而影响辅助功能的正常使用。正确的做法是直接在 legend 中放置纯文本，确保其作为语义标签的纯粹性。
此外，不要在 legend 中使用样式标签如 b 或 i，除非这些标签具有明确的语义含义。如果仅是为了视觉上的强调，应使用 CSS 来控制样式，而不是修改 HTML 结构。保持 legend 元素的简洁和语义化，有助于提升网页的可访问性，确保所有用户都能顺畅地使用表单功能。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。