使用 JAWS 在 Bootstrap 下拉菜单中启用箭头键导航答案

【问题标题】：Enabling arrow key to navigation in the Bootstrap dropdown-menu with JAWS使用 JAWS 在 Bootstrap 下拉菜单中启用箭头键导航
【发布时间】：2016-05-26 21:40:08
【问题描述】：

对于 JAWS 用户，是否可以使用键盘导航到使用箭头键（上/下）的下拉菜单？

代码如下：

 <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" 
     data-toggle="dropdown" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">                    
      <li><a href="#">Dropdown link1</a></li>
      <li><a href="#">Dropdown link2</a></li>
    </ul>
  </div>

步骤：
1. 打开 JAWS 15.0
2. 关注带有下拉菜单的按钮
3. 按回车键
4. 按上/下键移动焦点

预期结果：
焦点应该是可见的

实际结果：
1. JAWS启动后焦点不可见
2. 如果 JAWS 未启动，焦点可见

http://jsfiddle.net/fewu2/t8q71q8f/

【问题讨论】：

标签： drop-down-menu twitter-bootstrap-3 accessibility jaws-screen-reader

【解决方案1】：

防止虚拟光标模式在通过键盘按“向上”或“向下”按钮时被激活的一个好方法是在父元素中使用application 的role。

如果您使用 Javascript 来控制 <li> 元素之间的导航，请尝试以下操作：

<div role="application">
    <div class="btn-group" role="group">
        ...
    </div>
</div>

【讨论】：

使用应用程序模式时要轻松。人们可能不会期望失去对浏览器的控制。

【解决方案2】：

尝试为您的下拉选项 li 元素赋予一个角色 o menuitem。

我相信至少在 NVDA 中，它的工作原理非常相似，遇到这样的下拉菜单会触发它进入 Jaws 所谓的“表单模式”，这意味着您可以使用箭头键。

如果这不起作用，请尝试在单击该下拉按钮后将用户的焦点移动到菜单的第一个 li。

我确实有一些代码可以令人满意地处理这个问题，我记得其中一个是为我修复它的。我会去具体找出哪个，如果不是两者。

HTH。

【讨论】：