<div aria-label="How are you">

在这种情况下，aria-label 的值被错误地填充了 HTML 标签。Chrome 浏览器在处理这种无效的 HTML 结构时，可能会“猜测”开发者的意图，并可能将 标签本身也视为 aria-label 内容的一部分进行朗读，而非仅仅朗读纯文本“How are you”。

aria-label 的正确使用原则

为了确保 aria-label 能够正确地为辅助技术提供信息，并避免不必要的朗读，我们需要遵循以下两个核心原则：

1. aria-label 应只包含纯文本

aria-label 的主要目的是提供一个简洁、描述性的文本标签。它不应该包含任何 HTML 标签、实体或样式。如果需要为辅助技术提供更复杂的描述或结构，应考虑使用其他 ARIA 属性，如 aria-labelledby（指向页面上可见的元素）或 aria-describedby。

错误示例：

<button aria-label="点击以提交表单">提交>">更多

正确示例：

提交更多

在上述原始问题中，如果 translations.content 确实需要包含 HTML 结构，那么在将其赋值给 aria-label 之前，应该提取出其中的纯文本内容。

// 假设 translations.content = "How are you"// 在赋值给 aria-label 之前，提取纯文本const plainTextContent = new DOMParser().parseFromString(translations.content, 'text/html').body.textContent || '';// 然后在模板中使用 plainTextContent

2. aria-label 在 div 元素上的应用需谨慎

aria-label 并非适用于所有 HTML 元素。根据 ARIA 规范，aria-label 主要用于那些具有可操作性或具有特定 ARIA 角色（如按钮、链接、表单控件、地标角色等）的元素。对于普通的 div 元素，如果它没有被赋予任何 ARIA 角色，那么 aria-label 可能不会被辅助技术正确识别或支持。

错误示例：

一些内容

正确示例（为 div 添加合适的 ARIA 角色）：

如果 div 确实需要一个可访问的名称，并且它扮演着某种语义角色，那么应该为其添加相应的 ARIA 角色。

  
欢迎
  
这是页面的主要内容。
  @@##@@

在原始问题中，如果 div 只是一个普通的容器，而其内容 How are you 是可见的，那么通常不需要 aria-label。屏幕阅读器会直接朗读 div 内部的可见文本内容。如果 div 内部的文本内容不足以表达其目的，或者内容不可见，才需要考虑使用 aria-label 或 aria-labelledby，并且通常需要为 div 提供一个合适的 ARIA 角色。

浏览器与辅助技术兼容性考量

值得注意的是，浏览器和辅助技术（如 VoiceOver、JAWS、NVDA）之间的兼容性可能存在差异。某些组合，例如 VoiceOver 与 Chrome，在处理特定 ARIA 属性或复杂 HTML 结构时，已知有时会出现不一致的行为。因此，在进行无障碍开发时，强烈建议在不同的浏览器和辅助技术组合下进行充分的测试，以确保用户体验的一致性。

总结与注意事项

为了避免 aria-label 误读 HTML 标签的问题，并提升网页的整体无障碍性，请遵循以下最佳实践：

aria-label 仅用于纯文本： 永远不要将 HTML 标签或结构化的内容放入 aria-label 的值中。如果需要，请先提取纯文本。语义化 HTML 优先： 尽可能使用原生的语义化 HTML 元素（如 , , 等），它们通常自带无障碍特性，减少对 ARIA 的依赖。为 div 赋予 ARIA 角色： 如果必须在 div 元素上使用 aria-label，请确保该 div 被赋予了适当的 ARIA 角色（如 role=”button”, role=”navigation”, role=”region” 等），以确保 aria-label 能够被辅助技术正确识别。利用 aria-labelledby 和 aria-describedby： 如果元素的可见文本内容已经可以提供足够的上下文，或者需要链接到页面上其他元素的描述，考虑使用 aria-labelledby 或 aria-describedby，它们能够引用页面上实际存在的元素，提供更丰富的无障碍信息。全面测试： 在多种浏览器和屏幕阅读器组合下测试您的无障碍实现，以确保所有用户都能获得良好的体验。

遵循这些原则，将有助于构建更健壮、更易于访问的 Web 应用程序，确保辅助技术能够准确地向用户传达信息。

以上就是解决 Chrome 中 aria-label 误读 HTML 标签的实践指南的详细内容，更多请关注创想鸟其它相关文章！