本页全面介绍了 Chrome 开发者工具中的无障碍功能。它面向以下 Web 开发者：
- 对 DevTools 有基本的了解，例如如何打开它。
- 熟悉无障碍功能原则和最佳实践。
此参考文档旨在帮助您了解开发者工具中可用于检查网页无障碍功能的全部工具。
如果您需要有关使用辅助技术（例如屏幕阅读器）浏览开发者工具的帮助，请参阅使用辅助技术浏览 Chrome 开发者工具。
如果您想了解如何开发无障碍网站，请参阅学习无障碍功能。
Chrome 开发者工具中的无障碍功能概览
本部分介绍了开发者工具在整个无障碍工具包中的作用。
在确定网页是否可访问时，您需要考虑以下两个一般性问题：
- 我可以使用键盘或屏幕阅读器浏览网页吗？
- 网页的元素是否已正确标记，以便供屏幕阅读器读取？
一般来说，开发者工具可以帮助您修复与问题 2 相关的错误，因为这些错误很容易通过自动化方式检测到。问题 1 同样重要，但遗憾的是，开发者工具无法在这方面为您提供帮助。如需查找与问题 1 相关的错误，唯一的方法是尝试亲自使用带有键盘或屏幕阅读器的网页。如需了解详情，请参阅如何进行无障碍功能审查。
审核网页的无障碍功能
一般来说，您可以使用 Lighthouse 面板下的无障碍功能检查来确定：
- 网页已针对屏幕阅读器正确标记。
- 网页上的文字元素具有足够的对比度。另请参阅提高网站的可读性。
如需审核网页，请执行以下操作：
- 前往要审核的网址。
在开发者工具中，点击 Lighthouse 面板。开发者工具会显示各种配置选项。
对于设备，如果您想模拟移动设备，请选择移动设备。此选项会更改您的用户代理字符串并调整视口大小。如果网页的移动版与桌面版显示方式不同，此选项可能会对审核结果产生重大影响。
在 Lighthouse 部分中，确保已启用无障碍功能。如果您想从报告中排除其他类别，请停用这些类别。如果您想了解其他提高网页质量的方法，请保持启用状态。
您可以在节流部分节流网络和 CPU，这在分析负载性能时非常有用。此选项应与您的无障碍功能得分无关，因此您可以随意使用。
借助清除存储空间复选框，您可以在加载网页之前清除所有存储空间，也可以在网页加载之间保留存储空间。此选项可能也与您的无障碍得分无关，因此您可以随意选择。
点击生成报告。10 到 30 秒后，开发者工具会提供一份报告。报告会提供各种有关如何改进网页无障碍功能的提示。
点击某项审核即可详细了解。
点击了解详情即可查看相应审核的文档。
另请参阅：aXe 扩展程序
您可能更喜欢使用 aXe 扩展程序或 Lighthouse 扩展程序，而不是 Chrome 中默认提供的 Lighthouse 面板。 它们通常提供相同的信息，因为 aXe 是为 Lighthouse 面板提供支持的基础引擎。aXe 扩展程序的界面不同，并且对审核的描述略有不同。
与审核面板相比，aXe 扩展程序的一大优势在于，它可让您检查并突出显示失败的节点。
使用设备工具栏测试内容重排
《Web 内容无障碍指南》(WCAG) 中的重排标准建议，即使视口大小调整或方向改变，网页内容也应保持可查看状态，且不会丢失信息。通过将内容对齐到单列，支持使用放大文本的用户。如需测试内容重排效果，请在 Lighthouse 面板中使用设备工具栏动态调整视口大小。
如需调整视口大小，请将手柄拖动到所需的尺寸。如需了解要测试的具体维度，请参阅 WCAG 重排成功标准。
“无障碍功能”标签页
在无障碍标签页中，您可以查看 DOM 节点的无障碍树、ARIA 属性和计算出的无障碍属性。
如需打开无障碍标签页，请执行以下操作：
- 点击元素面板。
- 在 DOM 树中，选择要检查的元素。
- 点击无障碍标签页。此标签页可能隐藏在更多标签页 keyboard_double_arrow_right 按钮后面。
您可以将无障碍标签页拖到前面，以便日后更快地访问。
查看元素在无障碍功能树中的位置
无障碍功能树是 DOM 树的一个子集。它仅包含 DOM 树中与在屏幕阅读器中显示网页内容相关且有用的元素。
如需从“无障碍功能”标签页检查元素在无障碍功能树中的位置，请切换显示无障碍功能树。
此切换开关可将元素面板中的 DOM 树替换为整页模式的无障碍功能树。此树状结构有助于您更好地了解辅助技术如何呈现您的网页内容。
如需浏览无障碍功能树，您可以展开并选择节点，然后在计算出的属性下查看其详细信息。
您可以随时切换回 DOM 树。相应的 DOM 节点保持选中状态。这是一种了解 DOM 节点与其无障碍树节点之间映射关系的好方法。
查看元素的 ARIA 属性
ARIA 属性可确保屏幕阅读器拥有正确呈现网页内容所需的所有信息。
在“无障碍功能”标签页中查看元素的 ARIA 属性。
查看屏幕上元素的源代码顺序
网页上的元素并不总是按其在源代码中的顺序显示。这可能会让依赖辅助技术浏览网页的用户感到困惑。
如需查看和调试您网站上的来源订单，请执行以下操作：
- 检查网页上的元素。
- 在元素 > 无障碍 > 源代码顺序查看器中，选中 check_box 显示源代码顺序。
在视口中，开发者工具会使用边框勾勒出嵌套元素，并使用与源顺序对应的数字标记这些元素。
查看元素的计算无障碍属性
某些无障碍属性由浏览器动态计算。您可以在无障碍功能标签页的计算型属性部分查看这些属性。
在“无障碍功能”标签页中查看元素的计算出的无障碍功能属性。
“渲染”标签页
您可以使用渲染标签页来模拟某些 CSS 媒体功能，而无需在代码或测试环境中手动指定这些功能。这些媒体功能会根据用户的设备偏好设置更改网页的外观。如需测试网页的视觉无障碍功能，请打开 Rendering 标签页，然后探索以下选项：
- 模拟视觉缺陷，通过几种不同的模拟视觉缺陷查看您的网页。
- 模拟 CSS 媒体功能
prefers-color-scheme，查看启用深色模式或浅色模式后页面的外观。许多人认为深色模式是一种美学选择，但深色模式作为一种无障碍工具，也证明了它的其他用途。 - 模拟 CSS 媒体类型，以查看网页的打印或屏幕媒体样式。
- 模拟 CSS 媒体功能
forced-colors，以查看在用户代理启用强制配色模式时，网页的显示效果。 - 模拟 CSS 媒体功能
prefers-contrast，以查看具有较高、较低或特定对比度值的网页内容。 - 模拟 CSS 媒体功能
prefers-reduced-motion，以查看运动效果减少的网页内容。有些用户会因动画内容而感到分心或恶心。使用此选项可查看网页在没有动画或平滑滚动等效果时的外观。 - 模拟 CSS 媒体功能
prefers-reduced-transparency，了解当用户请求减少设备上使用的透明或半透明图层效果时，您的 Web 内容会如何显示。
发现并修复低对比度文本
开发者工具可以自动查找低对比度问题，并建议更好的颜色来帮助您解决这些问题。如需了解详情，请参阅提高网站的可读性。