将鼠标悬停在网页上方，使用“检查”工具检测辅助功能问题

将鼠标悬停在呈现的网页上时， “检查” 工具将显示有关各个元素的信息，包括辅助功能信息。 相反， “问题” 工具会自动报告整个网页的问题。

“ 检查 工具”按钮 () ”位于 DevTools 的左上角。 单击“ 检查 工具”按钮时，该按钮变为蓝色，表示 “检查 ”工具处于活动状态。

当 “检查” 工具处于活动状态时，将鼠标悬停在呈现的网页上的任何元素上会显示 “检查” 覆盖。 此覆盖显示有关该元素的常规信息和辅助功能信息。 “检查”覆盖层的“辅助功能”部分显示有关文本颜色对比度、屏幕阅读器文本和键盘支持的信息。

有关检查工具main文章是使用检查工具分析 HTML 页面。

在新窗口或选项卡中打开 辅助功能测试演示网页 。

右键单击网页中的任意位置，然后选择“ 检查”。 或者，按 F12。 DevTools 将在网页旁边打开。

单击 DevTools 左上角的“ 检查 () ”按钮，使图标突出显示 (蓝色) 。

将鼠标悬停在呈现的演示网页中的任何元素上。 “检查”工具在呈现的网页中的 元素下方显示信息覆盖。

“检查”覆盖层的底部有一个“辅助功能”部分，其中包含以下信息：

对比度 定义弱视人士是否可以理解元素。 WCAG 指南定义的对比度指示) ) 绿色检查标记图标 (对比度是否足够 (橙色感叹号图标。

名称和角色是屏幕阅读器等辅助技术将报告有关元素的内容。

键盘可聚焦 指示用户是否可以访问元素，而不考虑输入设备。

位于“辅助功能”部分上方的“检查”覆盖层顶部列出了 元素的以下详细信息。

除了信息覆盖， “检查” 工具还提供类似于 元素 工具的 DOM 树中的悬停的区域颜色。

在新窗口或选项卡中打开 辅助功能测试演示网页 。

右键单击网页中的任意位置，然后选择“ 检查”。 或者，按 F12。 DevTools 将在网页旁边打开。

单击 DevTools 左上角的“ 检查 ”按钮 () ，以便该按钮突出显示 (蓝色) 。

将鼠标悬停在呈现的演示网页的不同部分。

现在，网页中的每个元素都以多色覆盖显示。 此多色覆盖可以显示元素内部的嵌套区域。

例如，将鼠标悬停在 Cats 的左边距上。

“检查”工具使用不同颜色突出显示 Cats 部分的多个矩形部分，显示网页上 CSS 弹性框定义产生的布局：

如果要配置网格覆盖或弹性框覆盖，请在 “元素” 工具中选择“ 布局 ”选项卡。请参阅 检查 CSS 网格。

在新窗口或选项卡中打开 辅助功能测试演示网页 。

右键单击网页中的任意位置，然后选择“ 检查”。 或者，按 F12。 DevTools 将在网页旁边打开。

在 DevTools 中，单击左上角 () 的“检查”按钮，以便该按钮突出显示 (蓝色) 。

选择 “元素” 工具。

在 “检查” 工具处于活动状态的情况下，将鼠标悬停在呈现网页的不同部分。 在 “元素” 工具中，HTML DOM 树会自动展开以显示有关将鼠标悬停在上的元素的信息。 悬停不会导致 “样式 ”窗格更新。

在呈现的网页中，单击任意元素。

元素工具会自动打开，并在 DOM 树中显示元素的 HTML。 “元素”工具还会在“样式”窗格中显示元素上应用的 CSS。 单击呈现的网页上的元素会关闭 “检查” 工具。

在呈现的网页中单击元素后，可以使用“样式”选项卡附近的“辅助功能”选项卡 () 查看辅助功能树并使用源顺序查看器。