NVDA / FOCUS /可访问性问题

Question

我们正在构建自定义下拉组件，并使用层次组成的复选框选择。每个层次结构均使用标准Bootstrap 3手风琴代码显示/隐藏，该代码很好地处理屏幕读取器（这是一个Drupal站点，因此Bootstrap 3是支持的版本）。

我们拥有控制上/下/home/home/end键的代码，该密钥在运行NVDA时完全无法触发。单击向下箭头应该带您进入下一个可见的复选框。主钥匙将您带到第一个。最终键将您进入最后一个。

当NVDA不运行时，所有这些都可以正常工作。跑步时，主/端钥匙什么都不做。向上/下箭头像Tab/shift-tab这样的作用，因此它们不会转到下一个复选框；他们转到下一个可表的元素。

这在所有浏览器中都在发生。

有人知道如何解决这个问题吗？

小提琴：

    $(document).ready(function(){
        $('.region_of_delivery_checkbox').keyup(function(e){
            var code = (e.keyCode ? e.keyCode : e.which);
            var tabables = $(".region_of_delivery_checkbox:visible");
            var index = tabables.index(this);
            console.log(`checkbox and tabables.length = ${tabables.length} and tabables.index(this) is: ${tabables.index(this)}`);
            if(code == 40) {
                console.log("40");
                tabables.eq(index + 1).focus();
                console.log(`tabables.eq(index + 1) is: ${index}`);
            } else if(code == 38) {
                console.log("38");
                tabables.eq(index - 1).focus();
            } else if(code == 35) {
                console.log("35");
                tabables.eq(tabables.length - 1).focus();
            } else if(code == 36) {
                console.log("36");
                tabables.eq(0).focus();
            }
        });
    });

Answer 1

这是标准的屏幕阅读器行为。下拉次数打开时，您仍处于屏幕读取器“浏览”模式中，并且将箭头键发送到屏幕读取器以进行解释，而不是浏览器。您可以通过按 ins + space 来切换“浏览”模式。切换模式时，您会听到声音通知。然后，您可以使用箭头键或主页/结束，事件将发送到浏览器，您将获得预期的行为。

但是主要的问题是，当您的下拉小部件接收到焦点时，您处于“浏览”模式。正确编码的下拉列表将自动将屏幕读取器从浏览模式中切换出来，以便箭头键可以按照您的预期工作。

如果您测试了此W3.org示例，则 https://www.w.org/wai/aria/apg/example-index/combobox/combobox/combobox-select-only.html ，当您 tab> tab 时， '将听到浏览器切换模式的可听见通知。按下 ins + space 时，您听到的声音相同。您的小部件应该做同样的事情。

您会注意到该示例使用roun =“ combobox”，因为您的代码没有。那是主要问题。

Answer 2

将角色=“应用”添加到表单中。 NVDA将自动切换到焦点模式，并且代码将正常工作。