如何使 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 键从一个类别导航到另一个类别。
要打开子类别菜单，请按 down arrow 键。
要关闭子类别菜单，请按 esc 键。
要从子菜单项导航到子菜单项，请按 tab。

感谢 Javascript/jQuery，所有这些功能都已经到位。 我的挑战 是在使用屏幕 reader 时出现的，例如 JAWS 或 NVDA，这目前正在阻止我的 Javascript/JQuery 如上所述用于键盘导航目的。

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

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

Answer 1

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

例如aria-haspopup。

您可以通过简单的 google 搜索 "aria dropdown menu" 查看一些示例，例如：

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

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

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

如何使 Javascript/jQuery 键事件与屏幕阅读器一起工作

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

html

javascript

jquery

accessibility

keyboard-navigation