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

Rob Dodson

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

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

概览

在开始之前，最好先在脑海中形成开发者工具界面结构的心理模型。开发者工具分为一系列面板，这些面板组织成 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”）时，表示您位于文本输入框中，可以更改元素的类型。
  • 按 Ctrl+Enter 或 Command+Enter (Mac) 接受更改。

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

“元素”面板标签页

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

  • 将焦点放在 DOM 树中的某个节点上，然后按 Tab 键，直到听到系统提示 Styles 窗格已被选中。
  • 使用向右键浏览其他可用标签页。

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 键将焦点移至该窗格内，然后探索其内容。在无障碍功能窗格中，您可以找到用于探索无障碍功能树、应用于元素的 ARIA 属性及其计算出的无障碍功能属性的控件。

无障碍功能树

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

已知问题

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

“审核”面板

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

配置和运行审核

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

已知问题

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

浏览审核报告

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

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