optgroup 元素内嵌 legend 元素如何提供可访问标签
在可自定义的下拉菜单中，optgroup 元素允许嵌套 legend 元素作为可访问标签，这会替换 label 属性的语义。
optgroup 元素内嵌 legend 的语义替换规则
在 HTML 规范中，optgroup 元素允许作为 select 元素的子元素来对选项进行分组。当 select 元素被标记为可自定义时，optgroup 元素可以包含一个 legend 元素作为子元素。此时，legend 元素提供的标签会替换掉 optgroup 元素自身的 label 属性，并且两者具有相同的语义含义。
这种嵌套结构主要用于提升可访问性。通过在 optgroup 内部使用 legend，开发者可以利用 CSS 对其进行更灵活的样式控制，同时确保屏幕阅读器能够正确识别该分组。浏览器在渲染时，会将 legend 元素视为该选项组的标题，用于辅助用户理解选项的类别。
代码实现与浏览器渲染逻辑
要实现这一功能，需要在 optgroup 标签内部直接写入 legend 标签。例如，在构建一个恐龙主题的下拉菜单时，可以在 optgroup 中嵌套 legend 来定义分组名称。浏览器会解析这种结构，并确保 legend 的文本内容作为该组的标签显示，而不是 optgroup 的 label 属性值。
需要注意的是，optgroup 元素本身不支持嵌套，即不能在一个 optgroup 内部再嵌套另一个 optgroup。这意味着 legend 元素只能作为 optgroup 的直接子元素存在。这种限制确保了 DOM 结构的清晰，避免了复杂的嵌套层级对可访问性工具的干扰。
验证 legend 标签生效的检查步骤
要验证 legend 元素是否正确替换了 label 属性，首先在浏览器中打开包含该结构的网页。使用屏幕阅读器或浏览器的辅助功能模式，展开下拉菜单并导航到对应的 optgroup 组。此时，屏幕阅读器朗读的标签名称应与 legend 元素内的文本内容一致，而非 optgroup 的 label 属性值。
除了听觉验证，还可以通过开发者工具检查 DOM 结构。在 Elements 面板中选中 optgroup 元素，确认其子元素列表中是否包含 legend 标签。如果结构正确，且浏览器支持该特性，则说明 legend 元素已成功作为可访问标签生效。
常见问题与注意事项
如果发现 legend 元素没有生效，可能是由于浏览器不支持“可自定义 select 元素”这一特性，或者 optgroup 元素本身未被正确嵌套在 select 中。此外，确保 legend 元素是 optgroup 的直接子元素，且没有其他标签干扰其位置，是排查此类问题的第一步。
另一个常见问题是混淆了 legend 与 label 的作用域。legend 元素仅作为 optgroup 的子元素存在，其作用范围仅限于该分组。如果需要在整个表单或页面级别提供标签，应使用外部的 label 元素或 fieldset 元素。保持标签与控件结构的语义对应，是构建高质量表单的关键。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。