javascript - 如何使 Javascript/jQuery 按键事件与屏幕阅读器配合使用

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 键从一个类别导航到另一个类别。
• 要打开子类别菜单，请按向下箭头键。
• 要关闭子类别菜单，请按 esc 键。
• 要从子菜单项导航到子菜单项，请按 tab。

由于 Javascript/jQuery，所有这些功能都已经到位。 我的挑战出现在使用屏幕阅读器(例如 JAWS 或 NVDA)时，它目前阻止我的 Javascript/JQuery 如上所述用于键盘导航目的。

具体来说，我无法通过我能想到的任何按键事件组合来访问子类别。

问题:是否可以修复此代码以支持键盘访问并兼容 ARIA？即使这是不可能的，解释一下为什么无法修复此代码也比什么都没有好。

Answer 1

您的代码缺少一些 aria 属性来指示您的菜单是下拉菜单以及描述您可能使用哪个快捷方式的解释。 向下箭头 和esc 键在网络导航中不常用。

例如，类似 aria-haspopup 的东西。

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

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

我想说，最困难的部分是拥有一些直观的快捷方式。

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

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