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

Rob Dodson

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

开发者工具的无障碍功能仍在开发阶段。有些面板和标签页比其他面板和标签页更适合搭配辅助技术使用。本指南将引导您了解最易于访问的面板，并重点介绍您在操作过程中可能会遇到的特定问题。

概览

开发者工具分为一系列面板，这些面板组织成 ARIA tablist。例如：

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

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

键盘快捷键

开发者工具键盘快捷键参考是一份实用的速查表。请务必为此页面添加书签，并在探索不同面板时返回此页面。

打开开发者工具

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

在面板之间导航

您可以通过键盘、命令菜单或使用鼠标/触控板在面板之间切换。

使用键盘进行导航

  • 在 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。面板 > 显示元素选项处于选中状态。
  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 键，直到听到系统提示样式窗格处于选中状态。
  • 使用向右键浏览其他可用标签页。

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

已知问题

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

“样式”窗格

在样式窗格中，您可以找到用于过滤样式、切换元素状态（例如 :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 键在样式列表中移动，也可以按 Esc 键退出此模式，然后返回到使用箭头键进行导航。

如需了解其他快捷键，请参阅“样式”窗格键盘参考。

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

切换元素状态

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

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

添加退出类

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

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

添加新的样式规则

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

“计算样式”标签页

在焦点位于“计算后”标签页上时，按 Tab 键可将焦点移至该标签页内并探索其内容。在计算出的样式属性标签页中，您可以找到一些控件，用于按特异性顺序探索实际应用于元素的 CSS 属性。

探索所有计算出的样式

按 Tab，直至到达计算出的样式集合。这些内容以 ARIA tree 的形式呈现。展开列表框可显示哪些 CSS 选择器正在应用计算出的样式。这些选择器按特指程度进行整理。

屏幕阅读器会朗读计算出的值、匹配的 CSS 选择器、包含该选择器的样式表的文件名以及该选择器的行号。

已知问题

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

“事件监听器”标签页

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

探索事件监听器

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

无障碍功能窗格

在焦点位于无障碍窗格时，按 Tab 键将焦点移至该窗格内，然后探索其内容。在 Accessibility 窗格中，您可以找到用于探索无障碍树、应用于元素的 ARIA 属性及其计算出的无障碍属性的控件。

无障碍功能树

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

已知问题

  • 无障碍功能窗格使用的 ARIA 树类型可能无法在 Chrome for Mac OS 屏幕阅读器（例如 VoiceOver）中使用。订阅 Chromium 问题 #868480，以便及时了解此问题的进展情况。
  • ARIA 属性和计算属性部分标记为 ARIA 树，但不包含焦点管理。这意味着这些部分无法通过键盘操作。

“审核”面板

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

配置和运行审核

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

已知问题

  • 配置表单的不同部分未标记 fieldset 元素。在浏览模式下，您可能更容易找到这些控件，从而了解哪些控件与每个部分相关联。
  • 审核运行完毕后，没有耳标或实时区域公告。通常，此过程大约需要 30 秒，之后您应该就可以前往结果页面了。使用浏览模式可快速找到结果。

浏览审核报告

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

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