无障碍功能参考

Kayce Basques

Twitter GitHub Glitch

Sofia Emelianova

GitHub

本页是 Chrome 开发者工具中无障碍功能的全面参考。本手册适用于符合以下条件的 Web 开发者：

• 对开发者工具有基本的了解，例如，如何打开它。
• 熟悉无障碍功能原则和最佳做法。

本参考文档旨在帮助您了解开发者工具中提供的所有工具，这些工具可以帮助您检查页面的无障碍功能。

如需了解如何使用屏幕阅读器等辅助技术浏览开发者工具，请参阅使用辅助技术在 Chrome 开发者工具中导航。

如果您想了解如何开发无障碍网站，请参阅了解无障碍功能。

Chrome 开发者工具中的无障碍功能概览

本部分将介绍开发者工具如何融入您的整体无障碍功能工具包。

在确定网页是否可访问时，您需要牢记 2 个常见问题：

1. 我可以使用键盘或屏幕阅读器浏览网页吗？
2. 是否针对屏幕阅读器正确标记了页面元素？

一般来说，开发者工具可以帮助您修正与问题 2 相关的错误，因为这些错误很容易被自动检测到。问题 1 同样重要，但遗憾的是，开发者工具无法为您提供帮助。查找与问题 1 相关的错误的唯一方法是，尝试自己使用键盘或屏幕阅读器使用页面。如需了解详情，请参阅如何进行无障碍功能审核。

审核网页的可访问性

一般来说，请使用 Lighthouse 面板下的无障碍功能检查功能来确定以下各项：

• 网页已针对屏幕阅读器正确标记。
• 页面上的文本元素的对比度足够高。另请参阅让您的网站更易于阅读。

要审核网页，请按以下步骤操作：

1. 转到您要审核的网址。

2. 在开发者工具中，点击 Lighthouse 标签页。开发者工具会显示各种配置选项。

   

   注意：本部分中的屏幕截图是使用 Chrome 69 截取的。在屏幕截图中，该标签页仍名为 Audits，但在 Chrome 83 中已重命名为 Lighthouse。您可以在 chrome://version 中查看自己运行的版本。审核面板界面在某些早期或更高版本的 Chrome 中看起来有所不同，但基本工作流程是相同的。

3. 对于 Device，如果您要模拟移动设备，请选择 Mobile。此选项会以不同的方式更改用户代理字符串，并调整视口大小。如果移动版网页与桌面版显示不同，则此选项可能会对审核结果产生重大影响。

4. 在 Lighthouse 部分，确保已启用无障碍功能。如果您想在报告中排除其他类别，请停用这些类别。如果您希望了解提高网页质量的其他方法，请保持启用状态。

5. Throttling 部分可用于限制网络流量和 CPU，这在分析加载性能时非常有用。此选项应与无障碍功能得分无关，因此您可以使用自己偏好的任何选项。

6. 通过清除存储空间复选框，您可以在加载页面之前清除所有存储空间，或者在页面加载之间保留存储空间。此选项也可能与您的无障碍得分无关，因此您可以使用您喜欢的任何一项。

7. 点击生成报告。10 到 30 秒后，开发者工具会提供报告。您的报告会为您提供有关如何改进网页无障碍功能的各种提示。

   

8. 点击某项评估即可了解详情。

   

9. 点击了解详情以查看该审核的文档。

   

另请参阅：aXe 扩展程序

您可能更愿意使用 aXe 扩展程序或 Lighthouse 扩展程序，而不是 Chrome 中默认提供的 Lighthouse 面板。 它们通常会提供相同的信息，因为 aXe 是为 Lighthouse 面板提供支持的底层引擎。aXe 扩展程序具有不同的界面，对审核的描述略有不同。

与 Audits 面板相比，aXe 扩展程序的一个优势是可让您检查并突出显示失败的节点。

“无障碍功能”窗格

在“无障碍功能”窗格中，您可以查看无障碍功能树、ARIA 属性以及 DOM 节点的计算无障碍功能属性。

如需打开“无障碍”窗格，请执行以下操作：

1. 点击元素标签页。
2. 在 DOM 树中，选择您要检查的元素。
3. 点击无障碍标签页。此标签页可能隐藏在更多标签页 按钮之后。

查看元素在无障碍功能树中的位置

无障碍功能树是 DOM 树的子集。它仅包含 DOM 树中与在屏幕阅读器中显示网页内容相关且有用的元素。

在“无障碍”窗格中检查相应元素在无障碍树中的位置。

在此视图中，您只能探索单个节点及其祖先。如需探索整个无障碍功能树，请按以下步骤操作。

（预览）探索整页的无障碍功能树

通过无障碍树的整页视图，您可以探索整个树，并更好地了解您的 Web 内容如何向辅助技术提供。

如需探索无障碍树，请执行以下操作：

1. 勾选 启用整页无障碍功能树。

2. 在顶部的操作栏中，点击重新加载开发者工具。

   

3. 在 Elements 面板的右上角，切换 Switch to Accessibility Tree view 按钮。

   

4. 浏览无障碍功能树。您可以展开节点或点击计算属性下查看详细信息。

5. 选择一个节点，然后点击 切换到 DOM 树状视图按钮，即可切换回 DOM 树。

   现已选择对应的 DOM 节点。这是理解 DOM 节点与其无障碍功能树节点之间的映射的绝佳方式。

注意：我们的团队仍在积极开发此预览版功能。期待收到您的反馈，以便进一步改进！

查看元素的 ARIA 属性

ARIA 属性可确保屏幕阅读器具备正确表示页面内容所需的全部信息。

在“无障碍”窗格中查看元素的 ARIA 属性。

查看屏幕上元素的来源顺序

页面上的元素并不总是按它们在源代码中的顺序显示。这可能会使依赖辅助技术浏览网页的用户感到困惑。

如需查看和调试您网站上的源代码订单，请执行以下操作：

1. 检查网页上的元素。
2. 在元素 > 无障碍 > Source Order Viewer 中，选中 Show source order。

在视口中，开发者工具会用边框勾勒出嵌套元素，并使用与它们的源顺序相对应的数字对其进行标记。

查看元素的计算无障碍属性

注意：如果您要查找计算的 CSS 属性，请参阅“已计算”标签页。

一些无障碍属性是由浏览器动态计算的。您可以在无障碍窗格的计算属性部分查看这些属性。

在“无障碍”窗格中查看元素的计算无障碍属性。

发现并修正低对比度文字

开发者工具可以自动发现对比度较低的问题，并建议更好的颜色来帮助您解决这些问题。如需了解详情，请参阅让您的网站更易于阅读。