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如上所述用于键盘导航。

具体而言，我无法通过我能提出的subcategories个事件的任意组合来访问keypress。

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

Answer 1

您的代码缺少一些aria属性，表示您的菜单是一个下拉菜单，并说明了您可能使用的快捷方式。 Down arrow密钥在网络导航中并不常用。

例如esc之类的东西。

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

我想说最困难的部分是有一些直观的捷径。

第一个例子是我喜欢的，因为它可以与aria-haspopup键一起使用，并添加一个实用的左/右（但可选）箭头快捷键来转到下一个类别。

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

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

1 个答案: