解决 Chrome 中 aria-label 误读 HTML 标签的实践指南

本文探讨了 `aria-label` 在 chrome 中误读 html 标签的问题，指出其根源在于将 html 字符串作为 `aria-label` 的值，以及 `div` 元素在无特定 aria 角色时对 `aria-label` 的有限支持。文章提供了 `aria-label` 的正确使用原则，强调其应只包含纯文本，并建议在 `div` 上使用时搭配适当的 aria 角色。此外，还讨论了浏览器与辅助技术的兼容性，并给出了避免此类问题的最佳实践。

在开发无障碍网页时，aria-label 属性是一个重要的工具，它允许开发者为元素提供一个可访问的名称，供屏幕阅读器等辅助技术使用。然而，当 aria-label 的值包含 HTML 标签时，可能会出现意料之外的行为，尤其是在 Chrome 浏览器中与 VoiceOver 等屏幕阅读器结合使用时，辅助技术可能会错误地将 HTML 标签本身也朗读出来。

aria-label 与 HTML 内容的冲突解析

问题的核心在于 aria-label 属性的设计初衷是接收纯文本字符串作为其值，而不是包含结构化标记的 HTML 片段。当开发者尝试将一个包含 HTML 标签（例如 <span>）的字符串直接赋给 aria-label 时，浏览器和屏幕阅读器可能会尝试解析这个非标准的输入，从而导致不正确的朗读行为。

考虑以下示例代码，它展示了导致问题的不当用法：

<div [attr.aria-label]="translations.content | translate"></div>

如果 translations.content 变量的值是 "<span>How are you</span>"，那么最终渲染出的 HTML 将会是：

立即学习“前端免费学习笔记（深入）”；

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

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

aria-label 的正确使用原则

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

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

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

错误示例：

<!-- 错误：aria-label 包含 HTML 标签 -->
<button aria-label="点击以<span class='highlight'>提交</span>表单">提交</button>

<!-- 错误：aria-label 包含 HTML 实体，虽然可能被解析，但不推荐 -->
<a href="#" aria-label="更多>>">更多</a>

正确示例：

慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情

<!-- 正确：aria-label 仅包含纯文本 -->
<button aria-label="点击以提交表单">提交</button>

<!-- 正确：aria-label 仅包含纯文本 -->
<a href="#" aria-label="更多">更多</a>

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

// 假设 translations.content = "<span>How are you</span>"
// 在赋值给 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-label -->
<div aria-label="这是一个容器">一些内容</div>

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

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

<!-- 正确：div 作为地标区域，支持 aria-label -->
<div role="region" aria-label="主要内容区域">
  <h1>欢迎</h1>
  <p>这是页面的主要内容。</p>
</div>

<!-- 正确：div 作为自定义按钮，支持 aria-label -->
<div role="button" tabindex="0" aria-label="点击以打开菜单">
  <img src="menu-icon.png" alt="菜单">
</div>

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

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

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

总结与注意事项

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

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

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

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