利用辅助技术浏览 Chrome 开发者工具

罗布·道德森

本指南旨在帮助主要依赖辅助技术（如屏幕阅读器）访问和使用 Chrome 开发者工具的用户。Chrome 开发者工具是 Google Chrome 浏览器中内置的一套 Web 开发者工具。如果您正在查找与改进网页无障碍功能相关的开发者工具，请参阅无障碍功能参考。

我们仍在开发开发者工具的无障碍功能。某些面板和标签页与辅助技术相比效果更佳。本指南将向您介绍访问最多的面板，并重点介绍在此过程中可能会遇到的具体问题。

概览

在开始之前，先对开发者工具界面的结构有一个思维模式会有所帮助。开发者工具分为一系列面板，这些面板会被整理成一个 ARIA tablist。例如：

  • 元素面板可让您查看和更改 DOM 节点或 CSS。
  • 在控制台面板中，您可以读取 JavaScript 日志和实时修改对象。

在每个面板的内容区域中，有许多不同的工具，在文档中通常称为标签页或窗格。例如，Elements 面板包含用于检查事件监听器、无障碍功能树等的其他标签页。标签页和窗格之间的区别有些是任意的。您只会看到其中一个术语，以便与开发者工具官方文档的其余部分保持一致。

键盘快捷键

DevTools 键盘快捷键参考是一份实用的备忘单。请务必为其添加书签，并在浏览不同面板时返回查看。

打开开发者工具

要开始使用，请仔细阅读打开 Chrome 开发者工具。您可以通过多种方式打开开发者工具，通过键盘快捷键或菜单项。

在面板之间导航

通过键盘导航

  • 打开开发者工具后，按 Ctrl+] 或 Command+] (Mac) 即可将焦点移至下一个面板。
  • 按 Ctrl+[ 或 Command+[ (Mac) 聚焦于上一个面板。
  • 还可以使用 Shift + Tab 将焦点移至某个面板的 tablist 中，并使用箭头键更改面板，不过使用前面提到的快捷键可能会更快。

已知问题

  • 某些面板（例如控制台和性能面板）在启用后可能会立即将焦点移至其内容区域。这可能会使使用箭头键进行导航变得困难。
  • 系统会读出所选面板的名称，但仅在该面板读出面板中聚焦的内容之后才读出。因此很容易错过。

按命令菜单导航

如需聚焦于特定面板，请使用命令菜单：

  1. 打开开发者工具后，按 Ctrl+Shift+P 或 Command+Shift+P (Mac) 以打开命令菜单。命令菜单是一个模糊搜索自动补全组合框。
  2. 输入您要打开的面板的名称，然后使用向下箭头键盘找到正确的选项。
  3. 按 Enter 键运行命令。

例如，如需打开元素面板，请执行以下操作：

  1. 打开命令菜单。
  2. 先按 E，然后按 L。已选择面板 > 显示元素选项。
  3. 按 Enter 键运行用于打开面板的命令。

以这种方式打开面板会将焦点定向到面板本身的内容。对于 Elements 面板，焦点会移至 DOM 树中。

元素面板

检查网页上的元素

  1. 使用屏幕阅读器的光标找到您要检查的元素。
  2. 模拟用鼠标右键点击该元素以打开上下文菜单。
  3. 选择检查选项。此操作会打开 Elements 面板，并聚焦 DOM 树中的元素。

DOM 树的布局方式是 ARIA tree。有关示例，请参阅使用键盘浏览 DOM 树。

在 DOM 树中复制元素的代码

  1. 将焦点置于 DOM 树中的某个节点上，调出右键点击上下文菜单。
  2. 展开复制选项。
  3. 选择 Copy outerHTML。

已知问题

  • 复制 outerHTML 通常不选择当前节点，而是选择其父节点。不过，元素的内容仍应位于复制的 outerHTML 中。

修改 DOM 树中某个元素的属性

  • 将焦点移至 DOM 树中的某个节点后，按 Enter 使其可修改。
  • 按 Tab 键可在属性值之间移动。当您听到“空格”时，即是处于空文本输入中，并且可以输入新的属性值。
  • 按 Ctrl+Enter 或 Command+Enter (Mac) 接受更改，并听取元素的全部内容。

已知问题

  • 当您在文本输入内容中输入内容时，系统不会收到反馈。如果您输入了拼写错误并且使用箭头键浏览输入的内容，您也不会获得任何反馈。检查您的工作最简单的方法是接受更改，然后监听要公布的整个元素。

修改 DOM 树中元素的 HTML

  • 将焦点移至 DOM 树中的某个节点后，按 Enter 使其可修改。
  • 按 Tab 键可在属性值之间移动。当您听到元素的名称（例如“h2”）时，表示您处于文本输入中，并且可能会更改元素的类型。
  • 按 Ctrl+Enter 或 Command+Enter (Mac) 以接受更改。

例如，输入 h3 并按 Ctrl+Enter 或 Command+Enter (Mac) 会将该元素的起始标记和结束标记更改为 h3。

“元素”面板标签页

Elements 面板包含一些额外的标签页，用于检查应用于某个元素的 CSS 或其在无障碍功能树中的位置等信息。

  • 将焦点移至 DOM 树中的某个节点后，按 Tab 直到听到 Styles 窗格已被选中。
  • 使用向右箭头浏览其他可用标签页。

DOM 树会将具有 href 属性的元素转换为可聚焦的链接，因此您可能需要多次按 Tab 键才能转到“Styles”窗格。

已知问题

无法通过键盘访问 DOM 断点和 Properties 标签页。

“Styles”窗格

在 Styles 窗格中，您会看到用于过滤样式、切换元素状态（例如 :active 和 :focus）、切换类以及添加新类的控件。还有一个强大的样式检查工具，可用于探索和修改 DOM 树中已获得焦点的元素当前应用的样式。

了解 Styles 窗格的关键概念在于，它仅显示 DOM 树中当前所选节点的样式。例如，假设您已检查完 <header> 节点的样式，现在想查看 <footer> 节点的样式。为此，您需要先在 DOM 树中选择 <footer> 节点。您可能会发现，使用 Inspect 工作流检查 footer 节点大体附近的节点（例如页脚中的链接）会更加快速，这会使 DOM 树成为焦点，然后使用键盘导航到您感兴趣的确切节点。

浏览“样式”窗格

由于所有样式工具都以某种方式连接回 Styles 窗格，因此最好先成为此工具的专家。

  • 将焦点置于 Styles 窗格后，按 Tab 键将焦点移至内部并浏览其内容。
  • 按 Tab 键，直到第一个样式变为活动状态。如果您使用的是屏幕阅读器，第一个样式将以“element.style {}”播报。
  • 按向下箭头即可按具体程度浏览样式列表。屏幕阅读器会读出每种样式，开头为 CSS 文件的名称、显示样式的行号以及样式名称本身。例如：“main.css:233 .card__img {}”
  • 按 Enter 键即可更详细地检查样式。焦点从样式名称的可修改版本开始。
  • 按 Tab 键可在每个 CSS 属性的可修改版本及其对应值之间移动。每个样式块的末尾都会显示一个空白的可编辑文本字段，可用于添加其他 CSS 属性。
  • 您可以继续按 Tab 键浏览样式列表，或者按 Escape 键退出此模式，然后返回使用箭头键进行导航。

请务必通读“样式”窗格键盘参考，了解其他快捷键。

已知问题
  • 如果您使用了 Filter 可编辑文本字段，那么您将无法再在样式列表中导航。

切换元素状态

如需切换元素的状态（例如 :active 或 :focus），请使用以下代码：

  1. 前往 Styles 窗格，然后按 Tab 键，直到 Toggle Element State 按钮获得焦点。
  2. 按 Enter 以展开元素状态集合。元素状态以一组复选框的形式显示。
  3. 按 Tab 键，直到第一个状态 :active 获得焦点。
  4. 按空格键即可启用。如果 DOM 树中当前选定的元素具有 :active 样式，系统现在会应用该样式。
  5. 继续按 Tab 键即可探索所有可用状态。

添加现有类

切换元素状态按钮旁边是元素类按钮。依次按 Tab 键和 Enter 键，将焦点移至该键。将焦点移至标有 Add New Class 的修改文本字段。

Element Classes（元素类）按钮主要用于将现有的类添加到元素中。例如，如果您的样式表包含一个名为 .clearfix 的辅助类，您可以按修改文本字段内的 . 来查看类的建议列表，并使用向下箭头查找 .clearfix 建议。您也可以自行输入类名称，然后按 Enter 键应用名称。

添加新的样式规则

元素类按钮旁边是新建样式规则按钮。按 Tab 键，然后按 Enter 键，将焦点移至该标签。将焦点移到样式检查器内的可编辑文本字段中。该字段的初始文本内容是 DOM 树中所选元素的标记名称。您可以在此字段中输入所需的任何类名称，然后按 Tab 键为其分配 CSS 属性。

“Computed”标签页

将焦点置于“Computed”标签页上，按 Tab 键将焦点移到内部并探索其内容。

探索所有计算出的样式

按 Tab 键，直到找到计算出的样式的集合。它们以 ARIA tree 的形式呈现。展开列表框可显示哪些 CSS 选择器正在应用计算出的样式。这些选择器按特异性进行组织。屏幕阅读器会读出计算值（CSS 选择器当前匹配）、包含选择器的样式表的文件名以及选择器的行号。

已知问题

  • 如果您使用 Filter 文本字段，您将无法再检查样式。

“事件监听器”标签页

在 Elements 面板中，您可以使用事件监听器标签页检查应用于元素的事件监听器。将焦点置于样式窗格，然后按向右箭头转到事件监听器标签页。

探索事件监听器

事件监听器以 ARIA tree 的形式呈现。您可以使用箭头键进行导航。屏幕阅读器会读出附加到事件监听器的 DOM 对象的名称，以及定义事件监听器的文件名及其行号。

无障碍窗格

将焦点置于无障碍功能窗格上，按 Tab 键将焦点移至内部并探索其内容。在 Accessibility 窗格中，有一些控件可用于探索无障碍功能树、应用于元素的 ARIA 属性及其计算的无障碍功能属性。

无障碍功能树

无障碍树以 ARIA tree 的形式呈现，其中每个 treeitem 对应于 DOM 中的一个元素。树声明所选节点的计算角色。div 和 span 等通用元素在树中作为“GenericContainer”宣布。使用箭头键可遍历树并探索父子关系。

已知问题

  • 在 macOS 屏幕阅读器（如 VoiceOver）中，无障碍功能窗格使用的 ARIA 树类型可能无法在 Chrome 中正确显示。订阅 Chromium 问题 868480，即可了解此问题的进展情况。
  • ARIA Attributes 和计算的属性部分已标记为 ARIA 树，但它们目前没有焦点管理，因此无法通过键盘操作。

“审核”面板

通过 Audits 面板，您可以对网站运行一系列测试，以检查与性能、无障碍功能、SEO 以及许多其他类别相关的常见问题。

配置和运行审核

  1. 首次打开审核面板时，焦点会位于表单末尾的运行审核按钮上。默认情况下，表单配置为在模拟的 3G 连接上使用移动模拟针对每个类别运行审核。
  2. 使用 Shift+Tab 或以“浏览”模式返回，以更改审核设置。
  3. 准备好运行审核后，导航回运行审核按钮，然后按 Enter 键。
  4. 将焦点移到模态窗口中，点击 Cancel 按钮，即可退出审核。在审核运行期间，您可能会听到一系列耳标，并且会多次刷新页面。

已知问题

  • 配置表单的不同部分目前未使用 fieldset 元素进行标记。您可以在“浏览”模式下浏览这些控件，以便找出与每个部分相关联的控件。
  • 审核运行完毕后，不会有任何耳标或实时区域通知。通常，此过程大约需要 30 秒，您应该就可以导航到结果了。使用“浏览”模式可能是获得结果的最简单方法。

浏览审核报告

审核报告分为多个部分，每个部分对应于每个审核类别。报告即会打开，其中包含每个类别的得分列表。这些得分也是可用于跳至相关部分的链接。每个部分中都包含可展开的 details 元素，其中包含通过或未通过审核的相关信息。默认情况下，系统只会显示失败的审核。 每个部分均以最终 details 元素结尾，该元素包含所有已通过的审核。

如需执行新的审核，请使用 Shift + Tab 退出报告并查找执行审核按钮。