label 标签内嵌套 h3 标签为何干扰辅助技术
在 label 标签内部放置 h3 标签会干扰辅助技术，因为标题元素通常被用作导航辅助。
干扰原因与辅助技术原理
辅助技术通常将标题元素视为导航辅助，因此在 label 内嵌套 h3 会破坏这种导航结构。MDN 指出，在 label 内放置标题元素会干扰许多种类的辅助技术。这是因为标题在网页中常被用作导航辅助，而 label 元素的主要功能是提供表单控件的说明。当两者结合时，辅助技术无法正确识别 label 的上下文，导致朗读顺序混乱或无法正确跳转。
为了保持辅助技术的正常工作，应避免在 label 内部使用标题标签。如果需要对标签文本进行视觉调整，可以使用 CSS 类来控制样式。MDN 建议使用 CSS 类应用到 label 元素上，而不是使用 HTML 标签来改变外观。对于需要标题的表单或表单部分，应使用 fieldset 元素内的 legend 元素来提供标题，而不是在 label 内嵌套 h3。
代码示例与正确写法
错误的写法是在 label 内直接嵌套 h3 标签，这会导致辅助技术无法正确解析。例如，MDN 提供的示例中，将 h3 放在 label 内部会干扰屏幕阅读器。正确的做法是将 h3 移出 label，或者使用 CSS 来调整样式。如果必须提供标题，应使用 fieldset 和 legend 元素来构建表单结构，而不是依赖 label 内部的标题。
正确的写法是使用 CSS 类来调整 label 的样式，或者将标题放在 label 外部。MDN 推荐的示例是将 h3 移出 label，并使用 CSS 类来控制字体大小。例如，可以为 label 添加一个 class，然后在 CSS 中定义该 class 的样式。这样既保持了语义的清晰，又避免了辅助技术的干扰。
排查步骤与验证方法
要排查 label 内嵌套 h3 是否干扰辅助技术，可以使用浏览器的开发者工具检查 DOM 结构。首先，打开网页并进入开发者工具，查看 HTML 结构。如果发现 label 元素内部包含 h3 标签，这可能是导致辅助技术干扰的原因。接下来，使用屏幕阅读器测试页面，检查标签朗读是否正确。如果发现朗读顺序混乱或无法正确跳转，说明存在干扰。
验证结果的方法是修改代码，将 h3 移出 label，并使用 CSS 类调整样式。然后重新测试页面，使用屏幕阅读器检查标签朗读是否恢复正常。如果朗读顺序正确且能够正确跳转，说明修改有效。此外，还可以使用浏览器的无障碍检查工具，如 axe DevTools，来检测是否存在无障碍问题。
其他注意事项与最佳实践
除了 h3 标签，其他标题元素如 h1、h2 等也不应嵌套在 label 内部。MDN 强调，除了隐式关联的表单控件外，不要在 label 内放置额外的交互元素，如锚点或按钮。这同样适用于标题元素，因为它们也是交互内容。如果需要在 label 内提供链接或其他交互元素，应将其放在 label 外部，并在 label 文本中引用。
最佳实践是使用 fieldset 和 legend 元素来构建表单结构，而不是在 label 内嵌套标题。MDN 建议对于需要标题的表单部分，使用 fieldset 元素内的 legend 元素。这样可以保持语义的清晰，同时避免辅助技术的干扰。此外，应确保 label 的文本清晰易懂，并使用 CSS 类来调整样式，而不是使用 HTML 标签。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。