Question

I have implemented my own drop down menu and wanted to clarify the accessibility implication of my solution:

http://jsfiddle.net/tpHcv/5/

The piece of code i am interested in for now is:

$('#sub-nav > li ul').each(function(index){

    var $this = $(this),
        index = index + 1;

    $this    
    .clone()
    .appendTo('#main-nav > li:eq(' + index + ')');

});

‘sub-nav’ is hiddden from everyone via CSS to start. Then it is appended to the relevant ‘main-nav’ li. Will this approach prevent people using assistive technology from getting to the sub menu items?

Please don’t aks why i have done it this way. Suffice to say i have no access to the original markup of the project so cannot just append the sub-menu to the markup in the way that i would like.

Answer 1

For greater accessibility, consider adding keyboard support. When a link has the focus (via tab or whatever), make sure its subnav is visible. Similarly, when a subnav link has focus, make sure it is visible. Some of that you can do with css via :focus.

It’s unfortunate you don’t have access to the markup. Is there a reason you need to clone the <ul>, or is it ok to just move the original element? Do your dom manipulation with script, but do the show/hide with css via the :hover pseudo-class.

This gets you part of the way there: http://jsfiddle.net/tpHcv/9/ You’ll still need some JavaScript to manage tabs and focus on the sub-items.

#main-nav li > ul
{
    display: none;
}

#main-nav > li a:focus + ul,
#main-nav > li:hover > ul
{
    display:block;
}

Will your #main-nav links go anywhere or are they just for triggering the sub navigation? If they don’t go anywhere, to support browsers with JavaScript disabled, consider hiding #main-nav initially with css, and then show it with JavaScript. This way it isn’t displayed unless the links will actually do something.