本指南旨在帮助主要依赖屏幕阅读器等辅助技术的用户访问和使用 Chrome 开发者工具。Chrome DevTools 是一套内置于 Google Chrome 浏览器中的 Web 开发者工具。如需了解与改进网页无障碍功能相关的 DevTools 功能，请参阅无障碍功能参考。
我们正在努力提升开发者工具的无障碍功能。有些面板和标签页与辅助技术的配合效果更好。本指南将向您介绍最易于访问的面板，并重点介绍您在此过程中可能会遇到的具体问题。
概览
在开始之前，最好先了解一下 DevTools 界面的结构。开发者工具分为一系列面板，这些面板会整理成 ARIA tablist。例如：
每个面板的内容区域内都包含许多不同的工具，在文档中通常称为标签页或窗格。例如，元素面板包含其他标签页，用于检查事件监听器、无障碍树等。标签页和窗格之间的区别有些不确定。之所以会看到这两个术语，只是为了与官方开发者工具文档的其余部分保持一致。
键盘快捷键
DevTools 键盘快捷键参考是一个实用的备忘单。请务必将其添加为书签，并在探索不同的面板时参考该页面。
打开开发者工具
首先，请阅读打开 Chrome 开发者工具。您可以通过多种方式打开 DevTools，包括通过键盘快捷键或菜单项。
在面板之间导航
使用键盘导航
- 打开 DevTools 后，按 Control+] 或 Command+] (Mac) 将焦点移至下一个面板。
- 按 Control+[ 或 Command+[（在 Mac 上）将焦点移至上一个面板。
- 您也可以使用 Shift+Tab 将焦点移至面板的
tablist，然后使用箭头键切换面板，不过使用前面提到的快捷键可能更快。
已知问题
- 某些面板（例如控制台和效果面板）可能会在启用后立即将焦点移至其内容区域。这可能会导致无法通过箭头键进行导航。
- 系统会读出所选面板的名称，但仅在读出面板中聚焦的内容后才会读出。这可能会导致您很容易错过。
通过命令菜单导航
如需将焦点移至特定面板，请使用命令菜单：
- 打开 DevTools 后，按 Control+Shift+P 或 Command+Shift+P（在 Mac 上）打开命令菜单。命令菜单是一个模糊搜索自动补全下拉菜单。
- 输入要打开的面板的名称，然后使用向下箭头键盘导航到正确的选项。
- 按 Enter 键运行命令。
例如，如需打开元素面板，请执行以下操作：
- 打开命令菜单。
- 依次输入 E 和 L。选择 Panel > Show Elements 选项。
- 按 Enter 键运行用于打开该面板的命令。
以这种方式打开面板会将焦点引导至面板本身的内容。对于元素面板，焦点会移至 DOM 树。
“元素”面板
检查网页上的元素
- 使用屏幕阅读器的光标导航到要检查的元素。
- 模拟对元素右键点击，以打开上下文菜单。
- 选择检查选项。此操作会打开元素面板，并将焦点移至 DOM 树中的元素。
DOM 树的布局为 ARIA tree。如需查看示例，请参阅使用键盘浏览 DOM 树。
复制 DOM 树中某个元素的代码
- 将焦点放在 DOM 树中的某个节点上，然后点击右键以调出上下文菜单。
- 展开复制选项。
- 选择复制 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），请执行以下操作：
- 前往样式窗格，然后按 Tab 键，直到切换元素状态按钮获得焦点。
- 按 Enter 键展开元素状态集合。元素状态显示为一组复选框。
- 按 Tab 键，直到第一个状态
:active获得焦点。 - 按 Space 键即可启用该功能。如果 DOM 树中当前选定的元素具有
:active样式，系统会立即应用该样式。 - 继续按 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 和许多其他类别相关的常见问题。
配置和运行审核
- 首次打开审核面板时，焦点会位于表单末尾的运行审核按钮上。默认情况下，该表单配置为使用模拟的 3G 连接在移动设备模拟环境中针对每个类别运行审核。
- 使用 Shift+Tab 或在浏览模式下返回，以更改审核设置。
- 准备好运行审核后，返回到运行审核按钮，然后按 Enter 键。
- 焦点会移至一个模态窗口，其中包含一个取消按钮，可让您退出审核。在审核运行并多次刷新页面时，您可能会听到一系列提示音。
已知问题
- 配置表单的不同部分目前未使用
fieldset元素标记。在浏览模式下浏览这些部分可能更容易，这样可以确定哪些控件与每个部分相关联。 - 审核完成后，系统不会播放提示音或实时区域播报。通常，此过程大约需要 30 秒，之后您应该就可以转到结果页面了。使用浏览模式可能是查看结果的最简单方法。
浏览审核报告
审核报告会分为与每个审核类别对应的部分。报告打开后，您会看到每个类别的分数列表。这些得分也是链接，可用于跳转到相关部分。每个部分中都包含可展开的 details 元素，其中包含与通过或未通过审核相关的信息。默认情况下，系统仅显示失败的审核。每个部分都以最后一个 details 元素结束，其中包含所有通过的审核。
如需运行新的审核，请按 Shift+Tab 退出报告，然后找到执行审核按钮。