NVDA / focus / accessibility Issues

Question

We are building custom dropdown components with a hierarchical selection of checkboxes. Each hierarchy is shown/hidden using standard bootstrap 3 accordion code which handles screen readers very well (this is a Drupal site so bootstrap 3 is the version supported).

We have code controlling the up/down/home/end keys which completely fails to trigger when NVDA is running. Clicking the down arrow is supposed to take you to the next visible checkbox. The home key takes you to the first. The end key takes you to the last.

All this works fine when NVDA is not running. When running, the home/end keys do nothing. The up/down arrow act like tab/shift-tab so they don't go to the next checkbox; they go to the next tabable element.

This is happening in all browsers.

Does anyone know how to fix this?

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

That's standard screen reader behavior. When your dropdown opens, you're still in screen reader "browse" mode and the arrow keys are sent to the screen reader for interpretation rather than to the browser. You can switch out of "browse" mode by pressing Ins + space . You'll hear an audible notification when it switches mode. You can then use the arrow keys or home/end and the events will be sent to the browser and you'll get your expected behavior.

But the main problem is that you are in "browse" mode when your dropdown widget receives focus. A correctly coded dropdown list will automatically switch the screen reader out of browse mode so that the arrow keys will work as you expect.

If you test this W3.org example, https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html , when you tab to the combobox, you'll hear the audible notification of the browser switching modes. The same sound you hear when you pressed Ins + space . Your widget should do the same.

You'll notice the example uses role="combobox" where as your code does not. That's the main problem.

Answer 2

Add role="application" to the form. NVDA will automatically switch to focus mode and the code will work fine.