验证元素的所有状态的可访问性 - Microsoft Edge Development

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

除了 “问题” 工具中的自动颜色对比度测试外，还可以使用 “检查” 工具来检查各个页面元素是否具有足够的对比度。如果对比度信息可用，“ 检查 ”覆盖将显示对比度和复选框项。绿色检查标记图标表示有足够的对比度，黄色警报图标表示对比度不足。

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

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

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

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

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

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

在呈现的网页中，将鼠标悬停在边栏导航菜单中的蓝色菜单项上。请注意，每个项都有一个动画。

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

单击 DevTools 左上角的“ 检查工具” ( ) 按钮。

突出显示了 “检查 ”工具图标;例如，它从灰色更改为蓝色。

使用“检查”工具时，将鼠标悬停在菜单项上时，不会运行菜单项上的动画。使用“检查”工具时，无法访问 hover 菜单项的状态来测试对比度，因为 hover 样式中的状态不会触发。

在呈现的网页中，将鼠标悬停在边栏导航菜单上的蓝色链接上。菜单项的动画不会运行。而是使用弹性框覆盖的颜色突出显示来显示菜单项。

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

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

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

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

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

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

在呈现的网页中，选择侧栏导航菜单中的蓝色 Cats 链接。此时会打开 “元素” 工具，其中选择了元素 <a href="#cats">Cats</a> 。

选择“ 样式 ”选项卡。所选 a 元素在 CSS 中具有 hover 应用于它的状态，但在“ 样式 ”窗格中不可见。

在样式规则 #sidebar nav li a 右侧的“样式”窗格中，选择链接 styles.css 。 “ 源” 工具随即打开。然后找到 CSS 伪类规则 #sidebar nav li a:hover 。检查工具处于活动状态时，此规则不会运行。我们将在后续步骤中模拟运行此状态规则。

选择 “元素” 工具。然后在“ 样式 ”窗格中，选择“ ：hov ( 切换元素状态 ) ”按钮。将显示 “强制元素状态 ”复选框部分。

单击 “：hover ”复选框。在 DOM 中，在元素 <a href="#cats">Cats</a> 的左侧，将显示一个黄点，指示元素具有模拟状态。 Cats 菜单项现在显示在网页中，就像指针悬停在网页中一样。菜单项上的动画可能会运行。

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

选择 DevTools 左上角的“ 检查 ( ) 按钮，以便该图标突出显示 (蓝色) 。

将鼠标悬停在边栏导航菜单中的蓝色 Cats 链接上。由于模拟悬停动画，链接现在为浅蓝色。此时将显示 “检查 ”工具的信息覆盖，在 “对比度” 行中显示橙色感叹号，指示对比度不够高。

状态模拟也是检查是否考虑了不同的用户需求（例如键盘用户的需求）的好方法。通过使用 “强制元素状态 ”复选框，可以模拟 :focus 状态，发现 UI 在具有焦点时保持不变。当元素具有焦点时缺少指示器是一个问题。