NVDA / focus / 可访问性问题

Question

我们正在构建具有分层选择复选框的自定义下拉组件。每个层次结构 shown/hidden 使用标准 bootstrap 3 手风琴代码，可以很好地处理屏幕阅读器（这是一个 Drupal 站点，所以 bootstrap 3 是支持的版本）。

我们有控制 up/down/home/end 键的代码，当 NVDA 为运行时完全无法触发。单击向下箭头应该会将您带到下一个可见的复选框。主页键带您到第一个。结束键带你到最后一个。

当 NVDA 不是运行时，所有这些都可以正常工作。当运行时，home/end 键什么都不做。 up/down 箭头的作用类似于 tab/shift-tab，因此它们不会转到下一个复选框；他们转到下一个表格元素。

所有浏览器都会出现这种情况。

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

Fiddle: 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

这是标准屏幕 reader 行为。当您的下拉列表打开时，您仍处于屏幕 reader“浏览”模式，并且箭头键被发送到屏幕 reader 进行解释而不是浏览器。您可以通过按 Ins+space 退出“浏览”模式。当它切换模式时，您会听到声音通知。然后，您可以使用箭头键或 home/end，事件将发送到浏览器，您将获得预期的行为。

但主要问题是当您的下拉小部件获得焦点时您处于“浏览”模式。正确编码的下拉列表会自动将屏幕切换到浏览模式 reader，以便箭头键按预期工作。

如果您测试此 W3.org 示例，https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html，当您 tab 到组合框时，您会听到浏览器切换的声音通知模式。与您按下 Ins+space 时听到的声音相同。您的小部件也应该这样做。

您会注意到该示例使用了 role="combobox"，而您的代码并未使用。这是主要问题。

Answer 2

在表单中添加 role="application"。 NVDA 将自动切换到焦点模式，代码将正常运行。

NVDA / focus / 可访问性问题

NVDA / focus / accessibility Issues

html

javascript

accessibility

wai-aria

nvda