如何使Javascript / jQuery键事件与Screen Readers一起使用

Question

我有以下jsFiddle，其中包含一个导航栏，其中包含一些类别，其中包含子类别。

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

我像这样利用Javascript / jQuery：

$(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();
        }
    });
});

如您所见，该导航功能对残障人士非常有效，这意味着您可以使用鼠标使用简单的CSS事件处理程序来浏览导航栏。

对于键盘的可访问性，我有以下非常具体的说明：

• 通过tab键在类别之间导航。
• 要打开子类别菜单，请按down arrow键。
• 要关闭子类别菜单，请按esc键。
• 要从子菜单项导航到子菜单项，请按tab 。

由于有了Javascript / jQuery，所有这些功能已经就位。 当使用屏幕阅读器（如JAWS或NVDA）时， 我面临的挑战是当前如何阻止我的Javascript / JQuery出于键盘导航目的而如上所述工作。

具体来说，我无法通过我可能遇到的keypress事件的任何组合来访问subcategories 。

问题：是否可以将此代码修复为可通过键盘访问并且符合ARIA？ 即使不可能，对为什么无法修复此代码的解释总比没有好。

Answer 1

您的代码缺少一些aria属性，以表明您的菜单是一个下拉菜单，并缺少说明来描述您可能使用的快捷方式。 Down arrow和esc键在网络导航中不常用。

例如aria-haspopup类的东西。

您可以通过简单的Google搜索“ aria下拉菜单”查看一些示例，例如：

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

我要说的是，最困难的部分是拥有一些可以直观工作的快捷方式。

第一个示例是我喜欢的东西，因为它可以与tab键一起使用，并添加实用的向左（向右）（但可选）的箭头快捷方式以转到下一个类别。

关于您的代码，我认为向下箭头可能会覆盖屏幕阅读器的导航键，因此使用enter键将在您的情况下起作用。