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

Rob Dodson

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

我们正在努力提升开发者工具的无障碍功能。有些面板和标签页与辅助技术的配合效果更好。本指南将向您介绍最易于访问的面板，并重点介绍您在此过程中可能会遇到的具体问题。

概览

在开始之前，最好先了解一下 DevTools 界面的结构。开发者工具分为一系列面板，这些面板会整理成 ARIA tablist。例如：

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

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

键盘快捷键

DevTools 键盘快捷键参考是一个实用的备忘单。请务必将其添加为书签，并在探索不同的面板时参考该页面。

打开开发者工具

首先，请阅读打开 Chrome 开发者工具。您可以通过多种方式打开 DevTools，包括通过键盘快捷键或菜单项。

在面板之间导航

使用键盘导航

  • 打开 DevTools 后，按 Control+] 或 Command+] (Mac) 将焦点移至下一个面板。
  • 按 Control+[ 或 Command+[（在 Mac 上）将焦点移至上一个面板。
  • 您也可以使用 Shift+Tab 将焦点移至面板的 tablist，然后使用箭头键切换面板，不过使用前面提到的快捷键可能更快。

已知问题

  • 某些面板（例如控制台和效果面板）可能会在启用后立即将焦点移至其内容区域。这可能会导致无法通过箭头键进行导航。
  • 系统会读出所选面板的名称，但仅在读出面板中聚焦的内容后才会读出。这可能会导致您很容易错过。

通过命令菜单导航

如需将焦点移至特定面板，请使用命令菜单：

  1. 打开 DevTools 后，按 Control+Shift+P 或 Command+Shift+P（在 Mac 上）打开命令菜单。命令菜单是一个模糊搜索自动补全下拉菜单。
  2. 输入要打开的面板的名称，然后使用向下箭头键盘导航到正确的选项。
  3. 按 Enter 键运行命令。

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

  1. 打开命令菜单。
  2. 依次输入 E 和 L。选择 Panel > Show Elements 选项。
  3. 按 Enter 键运行用于打开该面板的命令。

以这种方式打开面板会将焦点引导至面板本身的内容。对于元素面板，焦点会移至 DOM 树。

“元素”面板

检查网页上的元素

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

DOM 树的布局为 ARIA tree。如需查看示例，请参阅使用键盘浏览 DOM 树。

复制 DOM 树中某个元素的代码

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

已知问题

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

修改 DOM 树中元素的属性

  • 将焦点放在 DOM 树中的某个节点上，然后按 Enter 键即可对其进行修改。
  • 按 Tab 键可在属性值之间移动。当您听到“空格”时，表示您位于空白文本输入框中，可以输入新的属性值。
  • 按 Control+Enter 或 Command+Enter（在 Mac 上）接受更改，并听到该元素的全部内容。

已知问题

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

在 DOM 树中修改元素的 HTML

  • 将焦点放在 DOM 树中的某个节点上，然后按 Enter 键即可对其进行修改。
  • 按 Tab 键可在属性值之间移动。当您听到元素的名称（例如“h2”）时，表示您位于文本输入框中，可以更改元素的类型。
  • 按 Control+Enter 或 Command+Enter（Mac）接受更改。

例如，输入 h3 并按 Control+Enter 或 Command+Enter（在 Mac 上）可将元素的开始标记和结束标记更改为 h3。

“元素”面板标签页

元素面板包含其他标签页，用于检查应用于元素的 CSS 或其在无障碍树中的位置等内容。

  • 将焦点置于 DOM 树中的某个节点上，按 Tab 键，直到听到系统读出“选择了 Styles 窗格”为止。
  • 使用向右键可浏览其他可用标签页。

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

已知问题

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

“Styles”窗格

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

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

浏览“样式”窗格

由于所有样式工具都会以某种方式关联回“样式”窗格，因此最好先成为此工具的专家。

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

请务必仔细阅读“样式”窗格键盘参考，了解更多快捷键。

已知问题
  • 如果您使用过滤可编辑文本字段，则将无法再浏览样式列表。

切换元素状态

如需切换元素的状态（例如 :active 或 :focus），请执行以下操作：

  1. 前往样式窗格，然后按 Tab 键，直到切换元素状态按钮获得焦点。
  2. 按 Enter 键展开元素状态集合。元素状态显示为一组复选框。
  3. 按 Tab 键，直到第一个状态 :active 获得焦点。
  4. 按 Space 键即可启用该功能。如果 DOM 树中当前选定的元素具有 :active 样式，系统会立即应用该样式。
  5. 继续按 Tab 键可浏览所有可用状态。

添加退出类

启用/停用元素状态按钮旁边是元素类按钮。按 Tab 键，然后按 Enter 键将焦点移至该按钮。焦点移至标签为添加新课程的编辑文本字段。

元素类按钮主要用于向元素添加现有类。例如，如果您的样式表包含名为 .clearfix 的辅助类，您可以在编辑文本字段中按 . 以查看类建议列表，然后使用向下箭头找到 .clearfix 建议。或者，您也可以自行输入类名称，然后按 Enter 键将其应用。

添加新的样式规则

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

“计算”标签页

将焦点置于计算标签页上，按 Tab 键将焦点移至该标签页内，然后浏览其内容。在计算出的样式属性标签页中，有控件可用于按特异性顺序探索实际应用于元素的 CSS 属性。

浏览所有计算出的样式

按 Tab 键，直至找到计算样式的集合。这些内容以 ARIA tree 的形式呈现。展开列表框可显示哪些 CSS 选择器正在应用计算样式。这些选择器按具体性排序。屏幕阅读器会读出计算值、当前匹配的 CSS 选择器、包含该选择器的样式的文件名以及该选择器的行号。

已知问题

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

“事件监听器”标签页

在元素面板中，您可以使用事件监听器标签页检查应用于元素的事件监听器。将焦点置于样式窗格上，按向右键可前往事件监听器标签页。

探索事件监听器

事件监听器以 ARIA tree 的形式呈现。您可以使用箭头键浏览这些选项。屏幕阅读器会读出事件监听器所附加的 DOM 对象的名称，以及定义事件监听器的文件名称及其行号。

“无障碍”窗格

将焦点置于无障碍窗格上，按 Tab 键将焦点移至其中，然后浏览其内容。无障碍窗格中提供了一些控件，用于探索无障碍树、应用于元素的 ARIA 属性以及计算出的无障碍属性。

无障碍功能树

无障碍功能树以 ARIA tree 的形式呈现，其中每个 treeitem 对应于 DOM 中的元素。树会播报所选节点的计算角色。div 和 span 等通用元素在树中会被宣布为“GenericContainer”。使用箭头键浏览树并探索父子关系。

已知问题

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

“审核”面板

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

配置和运行审核

  1. 首次打开审核面板时，焦点会位于表单末尾的运行审核按钮上。默认情况下，该表单配置为使用模拟的 3G 连接在移动设备模拟环境中针对每个类别运行审核。
  2. 使用 Shift+Tab 或在浏览模式下返回，以更改审核设置。
  3. 准备好运行审核后，返回到运行审核按钮，然后按 Enter 键。
  4. 焦点会移至一个模态窗口，其中包含一个取消按钮，可让您退出审核。在审核运行并多次刷新页面时，您可能会听到一系列提示音。

已知问题

  • 配置表单的不同部分目前未使用 fieldset 元素标记。在浏览模式下浏览这些部分可能更容易，这样可以确定哪些控件与每个部分相关联。
  • 审核完成后，系统不会播放提示音或实时区域播报。通常，此过程大约需要 30 秒，之后您应该就可以转到结果页面了。使用浏览模式可能是查看结果的最简单方法。

浏览审核报告

审核报告会分为与每个审核类别对应的部分。报告打开后，您会看到每个类别的分数列表。这些得分也是链接，可用于跳转到相关部分。每个部分中都包含可展开的 details 元素，其中包含与通过或未通过审核相关的信息。默认情况下，系统仅显示失败的审核。每个部分都以最后一个 details 元素结束，其中包含所有通过的审核。

如需运行新的审核，请按 Shift+Tab 退出报告，然后找到执行审核按钮。