使用英语阅读

通过


分析缺少键盘焦点的指示

键盘用户需要知道他们在网页上的位置。 当键盘用户选项卡指向链接或按钮时,链接或按钮应具有视觉指示,指示其具有焦点。 此视觉指示通常是围绕焦点元素的轮廓。

辅助功能测试演示网页中,使用键盘时,带有蓝色链接的边栏导航菜单不会直观地指示哪个链接具有焦点。 若要了解缺少视觉键盘焦点指示的原因,请尝试按 Tab 键访问演示页上的蓝色链接。 蓝色 的 Cats 按钮具有焦点,如浏览器窗口左下角显示的目标链接信息所示,但没有视觉指示焦点位于该按钮上:

演示网页,其中突出显示了 Cats 链接,但没有焦点的视觉指示

使用“源”工具分析缺少焦点指示

若要查看应用于链接(如链接按钮)的 CSS 样式,请使用 工具:

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

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

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

  4. 将鼠标悬停在页面侧栏导航菜单中的蓝色“ ”按钮上。 此时将显示“检查”覆盖,并指示元素 a键盘聚焦

    链接元素上的“检查”工具覆盖

    但是,当链接具有焦点时,“检查”覆盖不会显示元素缺少视觉指示。

  5. 在呈现的网页中,单击“ ”按钮。

    检查” 工具关闭, “元素” 工具随即打开,突出显示 a DOM 树中的节点。 CSS 规则 #sidebar nav li a 显示在“ 样式 ”选项卡中,以及指向 中的 styles.css行号的链接:

    元素工具,其中突出显示了“a”节点

  6. 单击链接 styles.css 。 CSS 文件将在 工具中打开:

    在源工具中应用于链接的样式

    请注意, #sidebar nav li a CSS 规则的 CSS 属性设置 outline: none为 ,这会删除使用键盘聚焦链接时浏览器自动添加的轮廓。

    CSS 文件包含使用伪类的 :hover CSS 规则,该规则用于指示使用鼠标时你正在使用哪个菜单项: #sidebar nav li a:hover。 但是,CSS 文件不包含使用伪类的 :focus CSS 规则,例如 #sidebar nav li a:focus。 这意味着,使用键盘时,没有用于直观指示你正在使用的菜单项的 CSS 样式。

    outline:none 属性和 :hover 样式

使用“样式”窗格模拟焦点状态

可以使用“ 样式 ”窗格来模拟焦点状态,而不是使用键盘聚焦链接:

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

  2. 右键单击网页中的任意位置,然后选择“ 检查”。

  3. 单击 DevTools 左上角的“ 检查 (检查”图标) 按钮,然后单击呈现的网页中的 “Cats ”链接。 节点 <a href="#cats">Cats</a>“元素” 工具中突出显示。

  4. 在“ 样式 ”窗格中,单击“ 切换元素状态 (:hov) 按钮。 此时将显示 “强制元素状态 ”部分。

  5. 选中复选框 :focus 。 焦点状态应用于链接,但链接没有焦点的可视指示:

    应用焦点状态的 Cats 链接

另请参阅