jquery - 使菜单下拉焦点以方便访问

Question

我有一个网站正在尝试使其更易于访问。我希望当用户通过链接(焦点)进行选项卡时，菜单将下拉并继续让用户通过子菜单链接进行选项卡。子菜单链接完成后，它会跳至下一个主菜单项。

这是导航代码的缩写版本:

<nav id="main-menu-con" class="mmenucon">
    <div class="menu-menu-1-container">
        <ul id="menu-menu-1" class="main-menu-items">
            <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-51"><a href="http://rgb.2bf.myftpupload.com/" aria-current="page">Home</a></li>
            <li id="menu-item-5508" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-5508"><a href="http://rgb.2bf.myftpupload.com/books-more/">Books &amp; More</a>
                <ul class="sub-menu" style="display: none; visibility: visible;">
                    <li id="menu-item-5517" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5517"><a href="http://rgb.2bf.myftpupload.com/books-more/browse-our-catalog/">Browse our Catalog</a></li>
                    <li id="menu-item-5512" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5512"><a href="http://rgb.2bf.myftpupload.com/books-more/learning-and-research/">Learning and Research</a></li>
                </ul>
            </li>
            <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-53"><a href="http://rgb.2bf.myftpupload.com/e-library/">E-Library</a>
                <ul class="sub-menu" style="display: none;">
                    <li id="menu-item-9223" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9223"><a href="http://rgb.2bf.myftpupload.com/e-library/lynx-libraries-app/">Lynx! Libraries App</a></li>
                    <li id="menu-item-9068" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9068"><a href="http://rgb.2bf.myftpupload.com/e-library/overdrive-libby/">Overdrive/Libby</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

子菜单最初是由 jQuery 隐藏的，我相信，通过以下代码:

jQuery(document).ready(function(){ 'use strict'; jQuery("#main-menu-con ul ul").css({display: "none"}); 

并通过以下代码在鼠标悬停时显示:

jQuery('#main-menu-con ul li').hover( function() { jQuery(this).find('ul:first').slideDown(300).css('visibility', 'visible');  }, function() { jQuery(this).find('ul:first').slideUp(100); });

我不确定这是否正确，因为当您将鼠标悬停时，子菜单的显示从“无”变为“阻止”。

我希望当菜单处于聚焦状态时也能发生同样的情况。我不确定是否需要在 JS 中执行此操作，或者 CSS 是否可以工作。

我不太擅长 JS(我认为这是最好的方法)，所以我尝试了这些版本:

jQuery('#main-menu-con ul li').focusin( function() { jQuery(this).find('ul').css('visibility', 'visible');});
jQuery('#main-menu-con ul li').focusin( function() { jQuery(this).find('ul').css('display', 'block');});

jQuery('#main-menu-con ul li a').focus( function() { jQuery(this).find('ul:first').slideDown(300).css('display','block');  }, function() { jQuery(this).find('ul:first').slideUp(100); });

没有任何效果。

我还尝试通过此代码使用 CSS 来定位它。

li a:focus + .sub-menu {
    display: block !important;
}

这似乎有效，但我不确定这是最好的方法，因为当焦点移动到下一个菜单时，下拉菜单仍然可见。

如果网站链接有帮助，请在此处:http://rgb.2bf.myftpupload.com/

Answer 1

I would like that when a user tabs through links (focus) the menu will drop down and continue to let the user tab through submenu links.

恐怕这与可访问性完全相反。

为了易于访问，您需要一个菜单​​，您必须通过enter键(或space键)激活下拉菜单。

为什么激活的下拉菜单比制表位更重要？

假设您的网站已经扩展，因此您有 5 个顶级菜单项，每个菜单项有 10 个子项，用户必须按 Tab 键 50 次以上才能到达最后一个菜单项。

但是，如果您有相同的场景，但使用 enter 激活子菜单，则制表位的最大数量为 15(5 个选项卡，输入，10 个选项卡)。

使用您当前的网站作为进一步的示例

对于您的网站，当前到达“我的帐户”的制表位数量为 45。

通过更改菜单结构，使向下箭头激活下拉菜单，到达“我的帐户”的制表位数量为 11，到达“我如何 > 志愿服务”的数量为 11 Kuna Library' 的值为 30(两个示例都包含 4 个用于下拉菜单的新制表位)。

可访问的菜单结构示例

一个好的起点是 this example from W3.org (“Space Bears”显示了正在运行的下拉菜单)，它显示了 2 个替代方案(一种是父项不链接到页面，另一种是带有下拉图标，因此顶级项仍然可以链接到页面)。

这不是一个完美的例子，但它会让您更接近于在其他网站上使用的真正可访问的菜单结构和系统。