使菜单集中在可访问性上 [英] Making menu drop down on focus for accessibility

问题描述

我有一个我要使其更易于访问的网站.我希望当用户通过链接(焦点)进行标签切换时，菜单将下拉并继续让用户通过子菜单链接进行标签切换.完成子菜单链接后，它会跳至下一个主菜单项.

I have a site I'm attempting to make more accessible. 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. When the submenu links are done, it tabs to the next main menu item.

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

This is an abbreviated version of the nav code:

<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隐藏的子菜单:

The submenus are initially hidden by jQuery, I believe, by this code:

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

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

and revealed on mouseover by this code:

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

我不确定 这是正确的，因为当您将鼠标悬停在鼠标上时，子菜单的显示从无"变为阻止".

I'm not sure this is right, because when you mouseover, the display of submenu goes from "none" to "block".

我希望菜单处于焦点状态时也会发生同样的情况.我不确定是否需要使用JS或CSS是否可以工作.

I'd like the same to happen when the menu is in the focused state. I'm not sure if I need to do it in JS or if CSS will work.

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

I'm not great at JS (which I believe is the best method), so I tried these versions:

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定位它.

I've also tried targeting it with CSS by this code.

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

似乎可以使用，但是我不确定这是最好的方法，因为当焦点移至下一个菜单时，下拉菜单仍然可见.

Which seems to work, but I'm not sure it's the best method, because when focus moves to the next menu, the drop down stays visible.

如果拥有站点链接有帮助，请访问以下网址: http://rgb.2bf.myftpupload.com/

If having the site link helps it's here: http://rgb.2bf.myftpupload.com/

推荐答案

我希望当用户通过链接标签(焦点)时，菜单将下拉并继续让用户通过子菜单链接标签.

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.

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

This is the exact opposite of accessible I am afraid.

要访问该菜单，您需要一个菜单​​，您必须通过enter键(或space键)激活下拉菜单.

To be accessible you want a menu where you have to activate the drop down via the enter key (or space key).

想象一下您的网站已经扩展，因此您有5个顶级菜单项，每个菜单项都有10个子项，用户必须分50次以上浏览才能到达最后一个菜单项.

Imagine your site has expanded so you have 5 top level menu items and each has 10 sub items, a user would have to tab over 50 times to reach the last menu item.

但是，如果您具有相同的情况，但是子菜单已通过enter激活，则制表位的最大数量为15(5个制表符，请输入10个制表符).

However if you have the same scenario but the sub menu is activated with enter the maximum number of tab stops is 15 (5 tabs, enter, 10 tabs).

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

For your site the current number of tab stops to reach 'My Account' is 45.

通过更改菜单结构，以使您的向下箭头激活下拉菜单，达到我的帐户"的制表位数量为 11 ，并达到如何操作"的数量.库纳图书馆的志愿者是 30 (两个示例都包括4个用于下拉菜单的新制表位).

By changing the menu structure so your down arrow activates the drop-down menu the number of tab stops to reach 'My Account' is 11 and the number to reach 'How Do I > Volunteer at Kuna Library' is 30 (both examples including 4 new tab stops for drop downs).

一个好的起点是此示例来自W3.org ("Space Bears"显示了运行中的下拉菜单)，它显示了2种选择(一种是父项不链接到页面，另一种是带有下拉图标的，因此顶层该项目仍可以链接到页面).

A good starting point is this example from W3.org ('Space Bears' shows the drop-down menu in action), it shows 2 alternatives (one where parent item doesn't link to a page and one with a drop-down icon so the top level item can still link to a page).

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

Not a perfect example but it will get you a lot closer to a truly accessible menu structure and system to use on other websites.

这篇关于使菜单集中在可访问性上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！