keyboard accessible drop down menu Options

[SSharma]

hi Guys,

I ma trying to make the menu bar keyboard accessible. i have replaced all the :hover with :focus. but still drop down menus are not coming through keyboard.
Can anyone provide the solution...

thanks!!!

[Christian J]

Which browser and -version are you testing in?

Alas browser support for keyboard navigation has deteriorated as browsers become more and more dumbed down.

[pandy]

Thank you for that information. Didn't know that. Do you mean only Chrome or otherwise not so dumb browsers too?

[Christian J]

I recalled at least Firefox had dropped support for tab key focusing on links, but now it seems to work in all my browsers (even Chrome).

If browsers still support this, perhaps it's best if the OP posts a sample code...

[Frederiek]

My Safari only tabs through all its interface links, but not through links or (sub)menu items on a said keyboard accessible page, like http://adobe-accessibility.github.io/Accessible-Mega-Menu/ or any other test I found by searching for "make drop down menu keyboard accessible".

[Christian J]

My Safari only tabs through all its interface links, but not through links or (sub)menu items on a said keyboard accessible page, like http://adobe-accessibility.github.io/Accessible-Mega-Menu/ or any other test I found by searching for "make drop down menu keyboard accessible".

Maybe you can set Accessibility.tabfocus in Firefox' about:config? See the reply to http://stackoverflow.com/questions/1170482...inks-in-firefox and http://kb.mozillazine.org/Accessibility.tabfocus

[Christian J]

i have replaced all the :hover with :focus. but still drop down menus are not coming through keyboard.

The difference is that :hover applies to most ordinary elements (including the top menu LI and its nested children), so you can move the mouse from the top LI to its sub menu link child and the top menu LI will still be hovered:

CODE

<style type="text/css" media="screen">
#nav ul {
position: absolute;
left: -200%;
}

#nav li:hover ul {
left: auto;
}
</style>

<ul id="nav">
<li>top menu    
    <ul>
    <li><a href="">sub menu</a></li>
    </ul>
</li>
</ul>

But :focus only applies to links and form fields, and you can't nest such elements. This means that you can open the sub menu by focusing a top menu link, but as soon as you move focus to the sub menu link the top menu will go out of focus and the sub menu closes again:

CODE

<style type="text/css" media="screen">
#nav ul {
position: absolute;
left: -200%;
}

#nav a:focus + ul
{
left: auto;
}
</style>

<ul id="nav">
<li>
    <a href="">top menu</a>    
    <ul>
    <li><a href="">sub menu</a></li>
    </ul>
</li>
</ul>

For workarounds you might use javascript or (less well supported) the CSS3 :target selector. I'll try to come up with something later.

This post has been edited by Christian J: Nov 13 2014, 07:46 AM

[Frederiek]

My Safari only tabs through all its interface links, but not through links or (sub)menu items on a said keyboard accessible page, like http://adobe-accessibility.github.io/Accessible-Mega-Menu/ or any other test I found by searching for "make drop down menu keyboard accessible".

Maybe you can set Accessibility.tabfocus in Firefox' about:config? See the reply to http://stackoverflow.com/questions/1170482...inks-in-firefox and http://kb.mozillazine.org/Accessibility.tabfocus

Those are for Firefox, which I have but hardly use. I've already have the All controls checked in the Keyboard shortcuts prefs, as suggested at stackoverflow.
Tab does work on this forum for most input (not the optional post icons, though it does work on none) and select elements.
But none of the demo's I could find upon searching for "keyboard accessible drop down menu", that were supposed to be keyboard accessible, worked.

[Christian J]

Those are for Firefox

[Christian J]

Here's a script that opens a sub menu if any of that sub menu's links is in focus. Unfortunately this still means the user must tab through the whole menu in order to reach the last link.

CODE

<style type="text/css" media="screen">
#nav ul {
position: absolute;
left: -200%;
}

#nav li.top {float: left;}

#nav li:hover ul
{
left: auto;
}

</style>

<script type="text/javascript">
function reset_menu(current)
{
    for(var i=0; i<a.length; i++)
    {
        if(a[i].parentNode.className=='top' && a[i].parentNode!=current)
        {
            a[i].parentNode.getElementsByTagName('ul')[0].style.left='-1000%';
        }
    }
}

function find_parent(current)
{
    if(current.className=='top')
    {
        reset_menu(current);
        current.getElementsByTagName('ul')[0].style.left='auto';
    }
    else if(current.id!='nav')
    {
        find_parent(current.parentNode);
    }
}

function detect_focus()
{
    var a=document.getElementById('nav').getElementsByTagName('a');
    for(var i=0; i<a.length; i++)
    {
        a[i].onfocus=function()
        {
            find_parent(this.parentNode);
        }
    }
}

if(window.addEventListener)
{
    window.addEventListener('load', detect_focus, false);
}
else if(window.attachEvent)
{
    window.attachEvent('onload', detect_focus);
}
</script>

<ul id="nav">
<li class="top"><a href="">menu 1</a>
    <ul>
    <li><a href="">link 1a</a></li>
    <li><a href="">link 1b</a></li>
    </ul>
</li>

<li class="top"><a href="">menu 2</a>
    <ul>
    <li><a href="">link 2a</a></li>
    <li><a href="">link 2b</a></li>
    </ul>
</li>
</ul>

[SSharma]

guys..none of solutions are working...
my dropdown list is expanding while i am using mouse but not by using keyboard....

Any suggestions???

[Christian J]

I suggested some general problems in post #7 above. For specific advice you must provide a URL or sample code of your own menu.

[Christian J]

This one uses the CSS3 :target selector for the tabbing feature. The user must press the Enter key in order to open a sub menu, which saves the user from having to tab through all links in all submenus. I also added an optional "close menu" link in case the opened menu obscures other page content.

CODE

<style type="text/css" media="screen">
#nav ul {display: none;}
#nav li {
float: left;
margin-left: 0.3em;
}
#nav li li {float: none;}
#nav li:hover ul, #nav ul:target {display: block;}
</style>

<ul id="nav">
<li><a href="#menu1">menu 1</a>
    <ul id="menu1">
    <li><a href="">link 1a</a></li>
    <li><a href="">link 1b</a></li>
    </ul>
</li>

<li><a href="#menu2">menu 2</a>
    <ul id="menu2">
    <li><a href="">link 2a</a></li>
    <li><a href="">link 2b</a></li>
    </ul>
</li>
<li><a href="#nav">close menu</a></li>
</ul>

[Frederiek]

None of that works for me. In Safari, the menu items are not reached.
I even tried in Firefox. There, the main menu items are reached, but the sub-menu doesn't open.

This is getting weird. The WCAG ( http://www.w3.org/TR/WCAG/#keyboard-operation ) defines keyboard access should be given, but no example on how to do that is given. It used to be a tabindex, but that doesn't work on A elements. Not even at W3C itself, on http://www.w3.org/WAI/UA/TS/html401/cp0101...1-TABINDEX.html .

When searching for "tabindex not working in " (wait for the Google suggestions), you'll see that there are results available for nearly all browsers.

[Christian J]

None of that works for me. In Safari, the menu items are not reached.

But Safari didn't support any link tabbing, or? That's a requirement for my menus.

I even tried in Firefox. There, the main menu items are reached, but the sub-menu doesn't open.

In which of the menus? If in the javascript menu, do you get any script error?

In the pure CSS menu, can you activate the focused top menu link from the Mac keyboard (the equivalent of a PC's Enter key)? And what if you manually add the hash value (e.g. "#menu1") to the URL and then load this new URL --does that open the sub menu?

[Frederiek]

None of that works for me. In Safari, the menu items are not reached.

But Safari didn't support any link tabbing, or? That's a requirement for my menus.

Apparently, it doesn't. Tabbing never reaches any of the links on the page, only form elements (like on this very page).

I even tried in Firefox. There, the main menu items are reached, but the sub-menu doesn't open.

In which of the menus? If in the javascript menu, do you get any script error?

In the pure CSS menu, can you activate the focused top menu link from the Mac keyboard (the equivalent of a PC's Enter key)? And what if you manually add the hash value (e.g. "#menu1") to the URL and then load this new URL --does that open the sub menu?

The js menu seems to tab through the sub-menus, but doesn't open them. Upon tabbing, I do get an error (beside a usual internal FF script error that's already there) on line 22 "ReferenceError: a is not defined". The Enter key doesn't help here, but removes the error message in the Console.

In the CSS menu, using the Enter/Return key indeed opens the sub-menu. Tabbing through, closes the first and Enter opens the second sub-menu. The Enter adds the hash value to the url automatically. Only problem with that is that they add up to the browsing history.

[Christian J]

The js menu seems to tab through the sub-menus, but doesn't open them. Upon tabbing, I do get an error (beside a usual internal FF script error that's already there) on line 22 "ReferenceError: a is not defined".

Maybe there's a bug with the variable scope. Try replacing function reset_menu() with this new one:

CODE

function reset_menu(current_submenu)
{
    var ul=document.getElementById('nav').getElementsByTagName('ul');
    for(var i=0; i<ul.length; i++)
    {
        if(ul[i].parentNode.className=='top' && ul[i].parentNode!=current_submenu)
        {
            ul[i].style.left='-200%';
        }
    }
}

(hopefully you'll at least get a different JS error now).

The Enter key doesn't help here, but removes the error message in the Console.

In the above javascript menu, the sub menus should open by tabbing alone --the Enter key is only used to load the URL of the focused link (after giving the links URLs, of course).

In the CSS menu, using the Enter/Return key indeed opens the sub-menu.

Sounds correct.

Tabbing through, closes the first

Tabbing shouldn't close anything, it should just move focus to the next link. The menus should only open/close when the URL hash is changed.

and Enter opens the second sub-menu.

Sounds correct.

The Enter adds the hash value to the url automatically.

Sounds correct.

Only problem with that is that they add up to the browsing history.

True. There might be javascript workarounds for this, such as http://dev.enekoalonso.com/2008/12/29/modi...rowser-history/

[Frederiek]

I replaced the function and there's no longer a js error.
The sub-menus do open upon tabbing. The first tab sets the focus on menu 1 and then tabbing moves the focus through the 2 sub-menus. The fourth tab closes menu 1, sets focus and opens menu 2. In total, there are 6 tabs to have focused them all. I only tested the Enter key to see if it did something in the js menu.

As for that snippet for the css menu, I then get an error: newHash not defined.

This is all still in Firefox only, as nothing works in Safari.

[Christian J]

This was fun! Here's another CSS3-based menu that doesn't modify the URL hash. As an additional bonus, even mouse users can make a sub menu stay open by ticking its checkbox.

Note that many users are not familiar with how keyboard navigation works, so some instructions might be helpful. With this menu the user must press the tab key to focus a checkbox, then press the space bar to tick the check box and toggle the sub menu open/close.

CODE

<style type="text/css" media="screen">
#nav li {
float: left;
margin-left: 0.3em;
list-style: none;
}
#nav ul li {float: none;}
#nav label {cursor: pointer;}

#nav ul {display: none;}

#nav li:hover ul,
#nav input:checked + ul {display: block;}
</style>

<ul id="nav">
<li>
    <label for="menu1">menu 1</label>
    <input type="checkbox" id="menu1">
    <ul>
    <li><a href="">link 1a</a></li>
    <li><a href="">link 1b</a></li>
    </ul>
</li>
<li>
    <label for="menu2">menu 2</label>
    <input type="checkbox" id="menu2">
    <ul>
    <li><a href="">link 2a</a></li>
    <li><a href="">link 2b</a></li>
    </ul>
</li>
</ul>

The above should be supported by IE9 and later. The :checked pseudo-class is not supported by IE8 and older. The :hover pseudo-class on the LI element is supported by IE7, but doesn't work in my IE8 due to a bug. If you want to support these browsers maybe it's best to hide some of the CSS.

[SSharma]

$(".main-menu li a").on('focus', function ()
{
$(this).parent().find("ul.submenu").css('display', 'block');

});

I used this JS ...its partially working now...dis means ..this code now expands my dropdown but nt collapsing while loosing the focus