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>

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".

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.

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

None worked.

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.

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

回答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.

This is the exact opposite of accessible I am afraid.

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

Why is an activated drop down menu important rather than tab stops?

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.

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).

Using your current site as a further example

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

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).

Example of accessible menu structures

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.

来源：https://stackoverflow.com/questions/59328987/making-menu-drop-down-on-focus-for-accessibility

标签

jquery

css

navigation

focus

accessibility