label 标签内嵌套 h3 标签会对可访问性造成什么影响

为什么不能在 label 标签内使用 h3 标题

辅助技术通常将标题元素作为导航的主要结构，如果在 label 标签内嵌套 h3，会破坏这种结构。屏幕阅读器可能会错误地将标签内的标题识别为页面导航的一部分，导致用户无法准确获取表单字段的说明信息。这种嵌套方式会干扰辅助技术对页面内容的解析，降低用户体验。

MDN 文档明确指出，在 label 元素内放置标题元素会干扰多种辅助技术。这是因为标题元素常被用作导航辅助，将其放在表单标签内会造成语义混淆。为了保持文档结构的清晰，建议使用 CSS 类名来调整标签文本的视觉样式，而不是改变其 HTML 结构。

如果需要在表单中突出显示字段名称，应将 h3 标签移出 label 元素，并使用 CSS 对 label 进行样式修饰。例如，可以为 label 添加一个类名，通过 CSS 控制其字体大小或粗细，从而实现视觉上的强调效果。这种方式既保持了 HTML 结构的语义化，又避免了辅助技术的解析错误。

MDN 提供了具体的示例代码，展示了如何使用 CSS 类来替代嵌套标题。推荐的做法是将 h3 标签放在 label 外部，或者直接在 label 内使用纯文本配合 CSS 类。例如，使用 class 属性来应用样式，而不是使用 h3 标签。这样可以确保表单结构对辅助技术友好，同时满足视觉设计需求。

要检查网页中的 label 标签是否正确使用了 CSS 样式而非嵌套标题，可以使用浏览器开发者工具查看 HTML 结构。打开开发者工具后，检查每个 label 元素的内容，确认其中是否包含 h3、h4 等标题标签。如果发现嵌套，应将其移除，并确保使用 CSS 类来控制样式。

另一种检查方法是使用辅助技术测试。在屏幕阅读器中浏览页面，查看表单字段的标签是否被正确读取。如果标签内的标题干扰了导航，说明结构存在问题。此时应按照 MDN 的建议，将标题元素移出 label，并使用 CSS 类来调整样式，以确保可访问性。

修改完成后，可以通过模拟辅助技术用户的操作来验证效果。在屏幕阅读器中聚焦到表单字段，检查标签文本是否被清晰读取，且没有额外的导航干扰。如果标签文本准确且结构清晰，说明修改成功。同时，可以检查页面大纲，确保表单部分没有出现异常的标题层级。

MDN 文档建议，对于需要标题的表单或表单部分，应使用 fieldset 和 legend 元素。如果只是需要调整标签文本的样式，使用 CSS 类是最佳选择。通过这种方式，可以确保网页结构符合语义化标准，同时提升辅助技术的兼容性，避免因嵌套标题导致的解析错误。