我在 DevTools 上花费了大量时间，在这样做的过程中，我开始了解 中的一些更“隐藏”的功能，并且很乐意在本文中与您分享其中的一些功能 – 特别是围绕可访问性。 本文使用 ，因为它是我使用的并且感觉很舒服的浏览器。话虽这么说，、和 Edge 在其开发工具方面都取得了长足的进步，而且它们确实拥有一些与辅助功能相关的出色功能。 您可能已经熟悉 ，但这里快速提醒您如何检查网页上的元素： 在 中打开您有兴趣检查的网页 使用快捷键）C 您的指针处于检查元素模式，继续并单击网页上的元素 就像这样，您已经打开了 并开始检查元素。不同的面板对应不同的功能，例如围绕 JavaScript 调试、性能等。 与辅助功能相关的功能分散在各处，所以让我们探索它们的用途、它们的位置以及如何使用它们。
此功能用于检查检查的文本与背景
颜色是否具有令人满意的颜色对比度。 通常，文本颜色和底层背景颜色之间的高对比度意味着对于不同能力的用户来说文本更清晰。此外，它还有助于支持用户在各种环境条件下阅读您的文本，请考虑以下可能影响用户感知文本易读性的示例： 在阳光充足的室外观看屏幕 移动设备已将屏幕亮度一路降低以延长电池寿命 “目的是在文本和背景之间提供足够的对比度，以便视力中 哥伦比亚电话号码列表 等的人可以阅读。” —了解成功标准 1.4.3：对比度（最低） 使用对比度工具可以立即为我们提供是/否答案：该文本是否满足最低对比度标准。使用此工具可以帮助影响网站的设计和配色方案，从而为弱视用户提供更易读的内容。 颜色选择器工具中的对比度 颜色选择器工具中的对比度（大预览） 颜色选择器工具中提供的对比度功能可以告知您是否已满足最低对比度要求。要访问此功能： 使用 检查文本元素 在“样式”窗格中找到颜色属性。
然后单击彩色小方块以调出颜
色选择器工具 单击“对比度”文本，其中提供了有关此主题的更多信息 三个比率分别代表： 您当前的对比度 最小对比度（AA ） 增强对比度 作为您自己的练习：在色谱上拖动圆形颜色选择器工具，并观察满足最小对比度和增强对比度的点。 还可以通过 报告向您报告此功能，本文的 Lighthouse 部分对此进行了介绍。 认识图像优化，Addy Osmani 的新实用指南，用于在网络上优化和提供高质量图像。一切尽在一本528 页的书中。 跳转至目录 ↬ 功能面板 辅助功能检查器 这是指 窗格，可让您查看 DOM 节点的各种辅 AO 列表 助功能属性和 ARIA 信息。 ARIA指的是一组属性，通常在 HTML 中使用，这反过来又使您的网站更容易被不同能力的个人访问。它绝对值得在您自己的网站上使用，但它确实需要了解网络可访问性的基础知识，以确保您以有助于用户的方式使用它。 例如，考虑以下 复制 辅助设备（例如屏幕阅读器）可以使用该role=”alert”属性向用户通告此类信息。 中的“辅助功能”窗格可以挑选此类属性 ( role) 并将其呈现给您，因此元素具有哪些与辅助功能相关的属性一目了然。 验证您在此窗格中看到的信息可以帮助回答这个问题：“我是否错误地编码了可访问性。
