网页中 label 标签内嵌套 h3 标签如何干扰辅助技术

为什么不能在 label 内使用标题元素

辅助技术通常将标题元素作为导航辅助手段。如果在 label 标签内部放置 h3 等标题元素，会干扰这些工具的导航功能。屏幕阅读器等设备无法正确识别标签内的标题层级，导致用户难以理解表单控件的具体含义。

MDN 文档指出，标题元素在辅助技术中常被用作导航工具。当标题元素出现在 label 内部时，会破坏这种导航机制。如果需要调整标签文本的视觉样式，应使用 CSS 类应用到 label 元素本身，而不是使用标题标签。

如果表单或表单的某个部分需要标题，应使用 fieldset 元素内的 legend 元素。legend 元素专门用于为 fieldset 提供可访问的标题。这种方式不会干扰辅助技术的导航功能，能够清晰地标识表单分组。

不要在 label 内部放置 h3 等标题元素。正确的做法是将标题文本放在 label 元素内部，并使用 CSS 类来控制其视觉样式。例如，可以为 label 添加一个 class 属性，然后在 CSS 中定义该类的样式规则。

使用屏幕阅读器打开网页，导航到包含表单的区域。检查屏幕阅读器是否将 label 内部的标题元素朗读为导航标题。如果听到非预期的标题，说明标签内嵌入了标题元素，这会干扰辅助技术的正常工作。同时，尝试点击标签文本，验证是否能正确聚焦到对应的输入控件。

使用浏览器的开发者工具检查 HTML 结构。查找是否存在 label 元素内部嵌套了 h3、h4 等标题元素。如果发现此类嵌套，应将其移除，并将标题文本保留在 label 内部，仅通过 CSS 调整其样式。

错误的写法是在 label 内部直接使用 h3 标签。例如，将 h3 标签放在 label 内部作为标签文本的一部分。这种写法会导致辅助技术混淆，无法正确识别标签层级。正确的做法是移除 h3 标签，仅保留文本内容，并通过 CSS 类来控制文本的字体大小或加粗等样式。

修复后的代码应将标题文本放在 label 内部，并使用 CSS 类来调整样式。例如，使用 label class='large-label' 来控制标签文本的视觉大小。同时，如果表单需要分组标题，应使用 fieldset 和 legend 元素来提供可访问的标题。