Chrome DevTools 无障碍功能参考

本文全面介绍 Chrome DevTools 的无障碍功能，面向满足以下条件的 Web 开发者：

• 对 DevTools 有基本了解，例如知道如何打开它。
• 熟悉无障碍原则和最佳实践。

这份参考的目的，是帮助你发现 DevTools 中所有可以用来检查页面无障碍性的工具。

如果你希望借助屏幕阅读器等辅助技术操作 DevTools，请参阅使用辅助技术浏览 Chrome DevTools。如果你希望学习怎样开发无障碍网站，请参阅学习无障碍。

Chrome DevTools 无障碍功能概览

本节说明 DevTools 在完整的无障碍工具集中的作用。

判断页面是否无障碍时，需要考虑两个基本问题：

1. 能否通过键盘或屏幕阅读器浏览页面？
2. 页面元素是否为屏幕阅读器正确标记？

一般来说，DevTools 可以帮助修复与第二个问题有关的错误，因为这类错误比较容易通过自动化检测。第一个问题同样重要，但 DevTools 无法在这方面帮助你。发现这类错误的唯一方式，是亲自使用键盘或屏幕阅读器操作页面。更多信息参阅怎样进行无障碍审查。

审计页面的无障碍性

通常，可以通过 Lighthouse 面板中的无障碍检查判断：

• 页面是否为屏幕阅读器正确标记。
• 页面上的文本元素是否具有足够的对比度；另见提高网站可读性。

审计步骤如下：

1. 打开要审计的 URL。
2. 在 DevTools 中点击 Lighthouse 面板。DevTools 会显示不同的配置选项。

注意：本节截图来自 Chrome 69，当时面板仍名为 Audits。它在 Chrome 83 中更名为 Lighthouse。可以在 chrome://version 中查看正在使用的版本。不同 Chrome 版本中的面板界面可能不同，但大体流程相同。

3. 在 Device 中选择 Mobile，即可模拟移动设备。该选项会改变用户代理字符串并调整视口大小。如果移动版页面与桌面版的显示不同，这一选项可能对审计结果产生明显影响。
4. 在 Lighthouse 部分，确保启用 Accessibility。如果不希望其他类别出现在报告中，可以禁用它们；如果还想发现改善页面质量的其他途径，则保留它们。
5. Throttling 部分可以限制网络和 CPU，适用于分析加载性能。它应该与无障碍评分无关，因此可以按自己的需要选择。
6. Clear Storage 复选框允许在加载页面前清除所有存储，或保留前后两次页面加载之间的存储。它通常也与无障碍评分无关，可以按需要选择。
7. 点击 Generate Report。10 至 30 秒后，DevTools 会给出报告，其中包含改善页面无障碍性的建议。

8. 点击某一审计项以进一步了解它。

9. 点击 Learn More，查看该审计项的文档。

另见：aXe 扩展

你也可能更愿意使用 aXe 扩展或 Lighthouse 扩展，而不是 Chrome 默认提供的 Lighthouse 面板。它们通常提供相同的信息，因为 aXe 是 Lighthouse 面板背后的引擎。aXe 扩展的界面不同，对审计项的说明也略有区别。

aXe 相对于 Audits 面板的一个优点，是可以检查并高亮标出未通过检查的节点。

使用 Device Toolbar 测试内容重排

Web 内容无障碍指南（WCAG）的重排准则建议：即使视口尺寸或方向发生变化，Web 内容也应保持可查看，并且不丢失信息。将内容排列为单列，可以支持放大文字的用户。为了测试内容重排，可以使用 Lighthouse 面板中的 Device Toolbar 动态调整视口。

拖动手柄即可将视口调整为需要的尺寸。具体测试尺寸，请参阅 WCAG 重排成功准则。

Accessibility 选项卡

在 Accessibility 选项卡中，可以查看 DOM 节点的无障碍树、ARIA 属性及计算后的无障碍属性。

打开方法：

1. 点击 Elements 面板。
2. 在 DOM Tree 中选择要检查的元素。
3. 点击 Accessibility 选项卡。它可能隐藏在 More Tabs 按钮后。

可以将 Accessibility 选项卡拖到前面，方便以后快速访问。

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

无障碍树是 DOM 树的子集。它只包含 DOM 树中与屏幕阅读器展示页面内容有关且有用的元素。

在 Accessibility 选项卡中打开 Show accessibility tree，即可检查元素在无障碍树中的位置。

这个开关会将 Elements 面板中的 DOM 树替换为整页无障碍树，帮助你理解 Web 内容如何暴露给辅助技术。

展开并选择节点，可以在 Computed properties 中查看详细信息。

随时都可以切换回 DOM 树，对应的 DOM 节点仍保持选中。这是理解 DOM 节点和无障碍树节点之间映射关系的一种好方法。

查看元素的 ARIA 属性

ARIA 属性确保屏幕阅读器拥有正确表达页面内容所需的全部信息。

在 Accessibility 选项卡中查看元素的 ARIA 属性。

查看元素在屏幕上的源码顺序

页面上的元素并不总是按照源码顺序显示。这可能让依赖辅助技术浏览 Web 的用户感到困惑。

查看并调试网站的源码顺序：

1. 检查页面上的一个元素。
2. 在 Elements > Accessibility > Source Order Viewer 中勾选 Show source order。

DevTools 会在视口中用边框标出嵌套元素，并以数字标注它们对应的源码顺序。

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

注意：如果你希望查看计算后的 CSS 属性，请参阅 Computed 选项卡。

某些无障碍属性由浏览器动态计算。可以在 Accessibility 选项卡的 Computed Properties 部分查看它们。

在 Accessibility 选项卡中查看元素计算后的无障碍属性。

Rendering 选项卡

使用 Rendering 选项卡，可以模拟某些 CSS 媒体特性，而无需在代码或测试环境中手动指定。媒体特性会根据用户的设备偏好改变页面外观。测试页面的视觉无障碍性时，打开 Rendering 选项卡并尝试以下选项：

• Emulate vision deficiencies：模拟不同视觉缺陷下的页面效果。
• Emulate CSS media feature prefers-color-scheme：检查启用深色或浅色模式时的页面外观。很多人认为深色模式只是审美选择，但深色模式作为无障碍工具解释了它在无障碍方面的价值。
• Emulate CSS media type：查看页面应用打印或屏幕媒体样式时的效果。
• Emulate CSS media feature forced-colors：查看用户代理启用强制配色模式时的页面效果。
• Emulate CSS media feature prefers-contrast：以较高、较低或指定对比度查看 Web 内容。
• Emulate CSS media feature prefers-reduced-motion：以减少动态效果的方式查看内容。有些用户会因动画分心或感到恶心。通过此选项，可以查看移除动画、平滑滚动等效果后的页面。
• Emulate CSS media feature prefers-reduced-transparency：查看用户请求减少设备上的透明或半透明图层效果时，Web 内容的呈现方式。

发现并修复低对比度文本

DevTools 可以自动发现低对比度问题，并推荐更合适的颜色，帮助你修复它们。更多信息参阅提高网站可读性。

原文：Accessibility features reference。作者：Kayce Basques、Sofia Emelianova；原文更新日期：2026-05-28 UTC。本文为中文翻译；保留原文截图。除另行注明外，原文文字内容采用 CC BY 4.0；官方教学截图保留原样，来源为原文页面，代码示例采用 Apache 2.0，详情见 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。