1

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 Answer 1

2

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.

2
  • Hi Graham. Thanks for helping. Can you tell me how to accomplish this in the fashion you described then?
    – pressword
    Dec 17, 2019 at 16:02
  • The example I gave from w3c will teach you the principles, the problem is I can't give you a formula as each menu is slightly different, the main rule is to make sure the menu drop downs don't open by default and only on pressing enter. Dec 19, 2019 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.