验证元素的所有状态的可访问性

检查元素的所有状态的可访问性，例如状态期间 hover 的文本颜色对比度。检查工具一次报告一种状态的辅助功能问题。若要检查各种元素状态的可访问性，请在“样式”选项卡中使用“样式”窗格的“：hov (切换元素状态) ”部分，如本文所述。

我们首先说明为什么在使用 “检查” 工具时需要状态模拟，然后演示如何使用状态模拟。

检查默认状态下的文本颜色对比度

若要检查网页上各个元素的文本颜色对比度，请使用“检查”工具的页面覆盖：

在新窗口或选项卡中打开辅助功能测试演示网页。
若要打开 DevTools，请右键单击网页，然后选择“ 检查”。或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。
单击 DevTools 左上角的“ 检查 () 按钮，以便该按钮突出显示 (蓝色) 。
将鼠标悬停在呈现网页中的元素上。此时将显示 “检查 ”工具的信息覆盖，其中显示有关鼠标指针下元素的信息。

如果对比度信息可用，“ 检查 ”覆盖将显示对比度和复选框项。绿色检查标记图标表示有足够的对比度，黄色警报图标表示对比度不足。

例如，边栏导航菜单中的链接具有足够的对比度，如检查覆盖图所示：

“捐赠状态”部分中的绿色“狗”列表项没有足够对比度，因此在“检查”覆盖层中用警告标记：

检查工具的信息覆盖仅表示单个状态。页面上的元素可以具有不同的状态，所有这些都需要测试。例如，将鼠标指针悬停在辅助功能测试演示页的菜单上时，菜单项将更改颜色。

首先，确认动画在不使用“检查”工具时运行：

接下来，确认动画在使用“检查”工具时未运行：

右键单击网页中的任意位置，然后选择“ 检查”。或者，按 F12。 DevTools 将在网页旁边打开。
单击 DevTools 左上角的“ 检查工具” () 按钮。
在呈现的网页中，将鼠标悬停在边栏导航菜单上的蓝色链接上。菜单项的动画不会运行。而是使用弹性框覆盖的颜色突出显示来显示菜单项。

使用 “检查” 工具时，无法访问 hover 元素的状态来测试文本对比度，因为 hover 样式中的状态不会触发。

以这种方式检查足够的文本对比度是不够的，因为页面上的元素可能具有不同的状态。

当 “检查 ”工具处于活动状态时，你需要模拟菜单项的状态，而不是将鼠标悬停在动画元素上。若要模拟菜单项的状态，请使用 “样式 ”窗格中的状态模拟。 “ 样式 ”窗格有一个 ：hov (切换元素状态) 按钮，其中显示一组标记为 “强制元素状态”的复选框。

若要在使用“检查”工具时打开悬停状态，请执行以下操作：

在新窗口或选项卡中打开辅助功能测试演示网页。
右键单击网页中的任意位置，然后选择“ 检查”。或者，按 F12。 DevTools 将在网页旁边打开。
单击 DevTools 左上角的“ 检查 ( ”按钮) 按钮，以便图标突出显示 (蓝色) 。
在呈现的网页中，单击边栏导航菜单中的蓝色 Cats 链接。此时会打开 “元素” 工具，其中选择了元素 <a href="#cats">Cats</a> ：
在 “样式” 面板中，单击“ 切换元素状态 (：hov) ”按钮。此时将显示 “强制元素状态 复选框”部分：
单击 “：hover ”复选框。在 DOM 中，在元素 <a href="#cats">Cats</a>的左侧，将显示一个黄点，指示元素具有模拟状态。 Cats 菜单项现在显示在网页中，就像指针悬停在它上方一样，并且菜单项上的任何动画都可能会运行：

应用模拟状态后，可以再次使用“检查”工具来检查用户将鼠标悬停在元素上时的对比度，如下所示：

从上面继续单击 DevTools 左上角的“ 检查 () 按钮，使图标突出显示 (蓝色) 。
将鼠标悬停在边栏导航菜单中的蓝色 Cats 链接上。由于模拟的悬停状态，链接现在为浅蓝色。此时将显示 “检查 ”工具的信息覆盖，在 “对比度” 行中显示橙色感叹号，指示对比度不够高：

状态模拟也是检查是否考虑了不同的用户需求（例如键盘用户的需求）的好方法。通过使用“强制元素状态”复选框，可以模拟:focus状态，并在可聚焦元素发生更改以指示其具有焦点时检查。当元素具有焦点时缺少指示器是一个辅助功能问题。若要了解详细信息，请参阅分析缺少键盘焦点的指示。