NVDA / focus /无障碍问题

Question

我们正在建立自定义下拉组件与一个层次式的复选框选择。每个层次结构都是使用标准的引导3手风琴代码显示/隐藏的，它很好地处理屏幕阅读器(这是一个Drupal站点，因此引导3是支持的版本)。

我们有控制向上/向下/家庭/结束键的代码，它在NVDA运行时完全无法触发。单击向下箭头应该会带您进入下一个可见复选框。家庭钥匙把你带到第一个。最后的钥匙把你带到最后。

当NVDA没有运行时，所有这些都可以正常工作。当运行时，主键/结束键什么都不做。向上/向下箭头的作用类似于tab/shift-选项卡，因此它们不会转到下一个复选框，而是转到下一个tabable元素。

在所有浏览器中都会发生这种情况。

有人知道怎么解决这个问题吗？

小提琴：https://jsfiddle.net/1pya0bm3/1/

    $(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

将role=“应用程序”添加到表单中。NVDA将自动切换到对焦模式，代码将正常工作。