详细介绍：Web 开发指向标 | Chrome 开发者工具学习资源 (四)
Chrome 开发者工具是一套 Web 开发者软件，直接内置于 Google Chrome 浏览器中，支援您即时修改页面和高效诊断问题，让您能够更快地构建更好的网站。
Chrome 开发者应用
https://developer.chrome.google.cn/docs/devtools/ai-assistance?hl=zh-cn
Google Chrome
https://www.google.com/chrome/?hl=zh-cn
本篇文章全面介绍了 Chrome 开发者工具中的无障碍效果，适用于具有以下特征的 Web 开发者:
对开发者软件有基本的了解，您允许参考我们之前的系列文章学习入门。
熟悉无障碍原则和最佳实践。
无障碍原则和最佳实践
https://web.developers.google.cn/accessibility/?hl=zh-cn
本篇文章旨在帮助您发现开发者工具中可帮助您检查网页无障碍作用的所有程序。若是您需要有关利用屏幕阅读器等辅助手艺浏览 Chrome 开发者工具的帮助，请参阅运用辅助技巧浏览 Chrome 开发者工具。如需了解如何开发无障碍网站，请参阅了解无障碍功能。
启用辅助技术浏览 Chrome 开发者软件
https://developer.chrome.google.cn/docs/devtools/accessibility/navigation?hl=zh-cn
了解无障碍功能
https://web.developers.google.cn/learn/accessibility
Chrome 开发者工具中的
无障碍功能概览
本部分将介绍开发者工具在整个无障碍功能工具包中的定位。
在确定网页是否可访问时，您得考虑以下 2 个问题:
1. 我能够使用键盘或屏幕阅读器浏览网页吗？
否已针对屏幕阅读器正确标记？就是2. 网页的元素
一般来说，开发者软件可以帮助您修复与问题 2 相关的错误，因为这些错误很容易以自动化方式检测到。但要查找与问题 1 相关的错误，唯一的办法是尝试使用键盘或屏幕阅读器测试网页。如需了解详情，请参阅如何进行无障碍功能审核。
屏幕阅读器
https://web.developers.google.cn/articles/semantics-builtin?hl=zh-cn#screen-readers
如何进行无障碍功能审核
https://web.developers.google.cn/articles/how-to-review?hl=zh-cn
审核网页的无障碍功能
一般来说，您行使用 Lighthouse 面板下的无障碍功能检查来确定以下各项是否已实现:
网页已针对屏幕阅读器正确标记。
网页上的文本元素对比度足够高。另请参阅提高网站的可读性。
提高网站的可读性
https://developer.chrome.google.cn/docs/devtools/accessibility/contrast?hl=zh-cn
如需审核网页，请执行以下操作:
1. 前往要审核的网址。
2. 在开发者工具中，点击 Lighthouse 面板。开发者工具会显示各种配置选项。
3. 若是您想模拟移动设备，请选择移动设备。此选项会以不同的方式更改您的用户代理字符串并调整视口大小。如果网页的移动版与桌面版显示方式不同，此选项可能会对审核结果产生重大影响。
4. 在 Lighthouse 部分中，确保已启用无障碍。如果您想从报告中排除其他类别，请停用相应类别。如果您想了解其他方式来提高网页质量，请让这些能力保持启用状态。
5. 在节流部分，您可以节流网络和 CPU，这在分析加载性能时极其有用。此选项应与您的无障碍功能评分无关，因此您可能应用自己喜欢的任何选项。
6. 经过清除存储空间复选框，您可以在加载网页之前清除所有存储空间，或在网页加载期间保留存储空间。此选项可能与您的无障碍特性评分无关，因此您可以应用自己喜欢的选项。
7. 点击生成报告。10 到 30 秒后，开发者软件会提供一份报告。报告中提供了有关如何改进网页无障碍特性的各种提示。
8. 点击相应审核可了解详情。
9. 点击了解详情可查看相应审核的文档。
另请参阅: aXe 扩展应用
您可能更喜欢使用 aXe 扩展脚本或 Lighthouse 扩展程序，而不是 Chrome 中默认提供的 Lighthouse 面板。由于 aXe 是 Lighthouse 面板的底层引擎，因此它们通常会提供相同的信息。aXe 扩展工具的界面不同，对审核的描述也略有不同。
aXe 扩展程序
https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=zh-cn&pli=1
Lighthouse 扩展程序
https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=zh-cn
aXe 扩展程序的一个优势是，您可以使用它检查和突出显示失败的节点。
使用设备工具栏测试内容的重新流布局
Web 内容无障碍指南 (WCAG) 重排标准建议，即使视口调整大小或更改屏幕方向，Web 内容也应保持可见且不会丢失信息。通过将内容对齐到单列，可支持使用放大文本的用户。如需测试内容的重新流式传输方式，请使用 Lighthouse 面板中的设备工具栏动态调整视口大小。
Web 内容无障碍指南 (WCAG) 重排
https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
调整视口大小
https://developer.chrome.google.cn/docs/devtools/device-mode?hl=zh-cn#responsive
如需调整视口大小，请拖动到所需的尺寸。如需了解要测试的具体尺寸，请参阅 WCAG 重新流成功标准。
WCAG 重新流成功标准
https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
"无障碍" 标签页
在 "无障碍" 标签页中，您允许查看无障碍树、ARIA 属性以及 DOM 节点的计算无障碍属性。
如需打开无障碍标签页，请执行以下操作:
1. 点击元素面板。
2. 在 DOM 树中，选择要检查的元素。
3. 点击无障碍标签页。此标签页可能隐藏在 "更多标签页" 按钮后面。
您可以将无障碍标签页拖到前面，以便日后更快地访问。
查看元素在无障碍特性树中的位置
无障碍作用树是 DOM 树的一部分。它仅包含 DOM 树中与在屏幕阅读器中显示网页内容相关且有用的元素。
无障碍作用树
https://web.developers.google.cn/articles/the-accessibility-tree?hl=zh-cn
在无障碍能力标签页中检查元素在无障碍机制树中的显示位置。
在这种视图中，您只能探索单个节点及其祖先节点。如需浏览整个无障碍功能树，请按以下步骤操作。
(预览版) 探索整页无障碍功能树
通过无障碍能力树的全页视图，您可以浏览整个树，并帮忙您更好地了解您的网站内容在辅助技术面前的呈现形式。
如需继续探索无障碍效果树，请执行以下操作:
1. 勾选 Enable full-page accessibility tree (启用整页模式的无障碍功能树)。
2. 在顶部的操作栏中，点击重新加载开发者工具。
3. 在元素面板的右上角，切换至 Switch to Accessibility Tree view (无障碍功能树视图) 按钮。
4. 浏览无障碍能力树时，您可以展开节点，也可以点击计算属性下方以查看详细信息。
5. 选择一个节点，然后点击 Switch to DOM tree view (DOM 树视图) 按钮，切换回 DOM 树。
现在，系统会选择相应的 DOM 节点。这非常有助于了解 DOM 节点与其无障碍树节点之间的映射。
查看元素的 ARIA 属性
ARIA 属性可确保屏幕阅读器拥有正确呈现网页内容所需的所有信息。
在 "无障碍" 标签页中查看元素的 ARIA 属性。
查看屏幕上元素的源代码顺序
网页上的元素并不一定会按照源代码中的顺序显示。这可能会让依赖辅助技术浏览网页的用户感到困惑。
如需在您的网站上查看和调试来源顺序，请执行以下操控:
1. 检查网页上的元素。
2. 依次选择元素 > 无障碍 > 来源顺序查看器，然后选中复选框展示来源顺序。
在视口中，开发者工具会用边框勾勒出嵌套元素，并用与其来源顺序对应的数字标记这些元素。
查看元素的计算无障碍功能属性
某些无障碍功能属性由浏览器动态计算。您允许在无障碍标签页的计算属性部分查看这些属性。
在 "无障碍" 标签页中查看元素的计算无障碍功能属性。
"渲染" 标签页
通过您能够使用渲染标签页来模拟某些 CSS 媒体功能，而无需在代码或测试环境中手动指定这些特性。这些媒体功能会根据用户的设备偏好设置更改网页的外观。如需测试网页的可视化无障碍功能，请打开渲染标签页，继而探索以下选项:
模拟视觉缺陷，借助多种不同的模拟视觉缺陷查看您的网页。
模拟 CSS 媒体功能 prefers-color-scheme，查看启用深色或浅色模式后页面的表明效果。许多人认为深色模式是一种美学选择，但深色模式作为无障碍功能工具恰恰说明了深色模式的其他用途。
模拟 CSS 媒体类型，以打印媒体或屏幕媒体样式查看网页。
模拟 CSS 媒体能力 forced-colors，以查看在用户代理启用强制色彩模式时网页的显示效果。
模拟 CSS 媒体功能 prefers-contrast，以查看对比度值更高、更低或更具体的网页内容。
模拟 CSS 媒体能力 prefers-reduced-motion，以减少动画效果来查看网页内容。有些用户会因动画内容而分心或感到不适。使用此选项可查看您的网页在没有动画或流畅滚动等效果时的显现效果。
模拟 CSS 媒体效果 prefers-reduced-transparency，以了解在用户请求减少设备上使用的透明或半透明层效果后，您的 Web 内容会以什么方式显示。
打开渲染标签页
https://developer.chrome.google.cn/docs/devtools/rendering?hl=zh-cn#open-rendering
模拟视觉缺陷
https://developer.chrome.google.cn/docs/devtools/rendering/apply-effects?hl=zh-cn#emulate_vision_deficiencies
模拟 CSS 媒体功能 prefers-color-scheme
https://developer.chrome.google.cn/docs/devtools/rendering/emulate-css?hl=zh-cn#emulate_css_media_feature_prefers-color-scheme
深色模式作为无障碍功能工具
https://web.developers.google.cn/articles/prefers-color-scheme?hl=zh-cn#dark_mode_as_an_accessibility_tool
模拟 CSS 媒体类型
https://developer.chrome.google.cn/docs/devtools/rendering/emulate-css?hl=zh-cn#emulate_css_media_type_enable_print_preview
模拟 CSS 媒体功能 forced-colors
https://developer.chrome.google.cn/docs/devtools/rendering/emulate-css?hl=zh-cn#emulate_css_media_feature_forced-colors
模拟 CSS 媒体功能 prefers-contrast
https://developer.chrome.google.cn/docs/devtools/rendering/emulate-css?hl=zh-cn#emulate_css_media_feature_prefers-contrast
模拟 CSS 媒体功能 prefers-reduced-motion
https://developer.chrome.google.cn/docs/devtools/rendering/emulate-css?hl=zh-cn#emulate_css_media_feature_prefers-reduced-motion
模拟 CSS 媒体机制 prefers-reduced-transparency
https://developer.chrome.google.cn/docs/devtools/rendering/emulate-css?hl=zh-cn#reduced-transparency
发现并修复低对比度文本
开发者工具可以自动发现低对比度困难，并提出更好的颜色建议来辅助您解决这些问题。如需了解详情，请参阅提高网站的可读性。
提高网站的可读性
https://developer.chrome.google.cn/docs/devtools/accessibility/contrast?hl=zh-cn
想了解更多 Chrome 开发者工具的实用技巧吗？请持续关注我们的系列文章，敬请期待更多精彩内容！
浙公网安备 33010602011771号