How to make Javascript/jQuery key events work with Screen Readers

Question

I have the following jsFiddle containing a navigation bar consisting of a few categories with sub categories in them.

<div class="navigation-bar">
    <div class="category-container" tabindex="0" role="navigation" aria-labelledby="category-1">
        <h4 id="category-1">Category</h4>
        <ul class="subcategory">
            <li tabindex="1"><a href="#">Subcategory</a></li>
            <li tabindex="2"><a href="#">Subcategory</a></li>
            <li tabindex="3"><a href="#">Subcategory</a></li>
            <li tabindex="4"><a href="#">Subcategory</a></li>
        </ul>
    </div>
    <div class="category-container" tabindex="0" role="navigation" aria-labelledby="category-2">
        <h4 id="category-2">Category</h4>
        <ul class="subcategory">
            <li tabindex="1"><a href="#">Subcategory</a></li>
            <li tabindex="2"><a href="#">Subcategory</a></li>
            <li tabindex="3"><a href="#">Subcategory</a></li>
            <li tabindex="4"><a href="#">Subcategory</a></li>
        </ul>
    </div>
</div>

I am leveraging Javascript/jQuery like so:

$(function(){
    $(".category-container").keydown(function(e){
        // down arrow shows the category sub menu, if said sub menu is hidden
        if($(this).find(".subcategory").is(":hidden") && e.keyCode === 40){
            $(this).find(".subcategory").toggle();
        }
        // esc hides the category sub menu, if said sub menu is visible
        else if($(this).find(".subcategory").is(":visible") && e.keyCode === 27){
            $(this).find(".subcategory").toggle();
        }
    });

    $("a").keydown(function(e){
        // if we press tab on the last sub category, hide current category sub menu
        if($(this).closest(".subcategory").find("li:last-child a").is(":focus") && e.keyCode === 9){
            $(this).closest(".subcategory").toggle();
        }
    });
});

As you can see, the navigation works very well for people without disabilities, meaning you can use your mouse to explore the navigation bar using simple CSS event handlers.

For keyboard accessibility, I have these very specific instructions:

• Navigate from category to category via tab press.
• To open a sub categories menu, press the down arrow key.
• To close a sub categories menu, press the esc key.
• To navigate from sub menu item to sub menu item, press tab .

All of that functionality is already in place thanks to Javascript/jQuery. My challenge comes when using a screen reader, like JAWS or NVDA, which is currently preventing my Javascript/JQuery from working as above described for keyboard navigation purposes.

To be specific, I cannot access the subcategories via any combination of keypress events I could come up with.

Question: Is it possible to fix this code to be keyboard accessible and ARIA compliant? Even if it is not possible, an explanation towards why it would not be possible to fix this code is better than nothing.

Answer 1

Your code lacks of some aria attributes to indicate that your menu is a dropdown menu and explanations to describe which shortcut you might use. Down arrow and esc key are not commonly used in web navigation.

Something like aria-haspopup for instance.

You can see some examples with a simple google search "aria dropdown menu", like:

• http://codepen.io/grayghostvisuals/pen/ltjDa
• http://staff.washington.edu/tft/tests/menus/html5/

I would say that the most difficult part is to have some shortcuts which will work intuitively.

The first example is something I like because it can be used with the tab key and add a pragmatic left/right (but optional) arrow shortcut to go to the next category.

Concerning your code, I think that the down arrow might override the navigation key of your screenreader, so using enter key will be something which should work in your case.