时间戳

首页 > 解决方案 > PC Chrome 中的 a11y：JAWS 打开时向上/向下箭头键导致黄色突出显示

accessibility - PC Chrome 中的 a11y：JAWS 打开时向上/向下箭头键导致黄色突出显示

问题描述

在过去的几个月里，我一直在努力使网站可以访问，最近我们的 QA 部门引起了我的注意。

我已经建立了一个 CodePen，显示了一个类似于我构建的示例。这里的主要部分是曲目列表：

<div id="track-list"
    tabindex="0"
    role="menu"
    aria-expanded="true"
    aria-activedescendant="ch1">

https://codepen.io/Motorcykey/pen/qyJrWX

背景：想法是我们有一个菜单项的章节列表，可以通过单击按钮隐藏或显示。当列表显示时，您将从“章节”按钮进入列表。一旦进入列表，Tab & Shift+Tab 将只滚动菜单项。只有“Esc”键会退出列表。

问题：没有 JAWS 运行它可以正常工作。如果用户尝试按下“向上/向下”键，则不会发生任何异常情况。

然而，一旦 JAWS 打开，就会发现如果使用向上/向下键，则会出现一个彩色高亮框，该框将读取页面的其他部分，而不必聚焦它们。最初，这将包括隐藏的菜单项，但我可以通过将其显示设置为“无”（而不是将其不透明度设置为“0”）来摆脱它。

但是，您仍然可以在此示例中看到，如果您采取以下步骤：

  1. 选项卡到章节按钮
  2. 点击 Space 或 Enter 隐藏菜单
  3. 点击键盘上的“向下”键。接下来，“播放/暂停按钮”应突出显示并由 JAWS 屏幕阅读器大声朗读。
  4. 同时，“章节”按钮保持“聚焦”，默认浏览器突出显示。

我的问题是围绕这个突出显示框和 JAWS 中向上/向下键的预期功能。这个高亮框的目的是什么，因为它似乎与浏览器焦点分离。有没有办法禁用它？用户是否通常使用向上/向下键，如果是这样，这看起来像预期的行为还是我应该更多地考虑以避免在进行辅助功能更新时对这些键造成混淆？

谢谢，

-米奇

标签： accessibilityjaws-screen-reader

解决方案

具有 role="menu" 的元素必须由箭头键控制，例如向下箭头键将焦点移动到下一个菜单项，向上箭头移动到上一个菜单项，并且 tab/shift+tab 必须将焦点移动到下一个/上一个页面元素. 正确的实现示例：https ://www.w3.org/TR/wai-aria-practices-1.1/#menubutton

推荐阅读