Advanced Search

Return to Snippet

Revision: 23613
at February 10, 2010 05:20 by chrisdpratt
Initial Code 
$('#top-nav ul ul a').each(function () {
    $(this).focus(function () {
        $(this).addClass('focused');
        var menuParent = $(this).closest('ul').parent();
        $(menuParent).addClass('dropdown-visible');
    });
		
    $(this).blur(function () {
        $(this).removeClass('focused');
        var menuParent = $(this).closest('ul').parent();
        if (!$('.focused', parent_li).length) {
            $(menuParent).removeClass('dropdown-visible');
        }
    });
});
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
Dropdown navigation is fairly inaccessible as it depends on hover events in 99.9% of cases. Tabbing through the navigation with the keyboard fails to reveal the dropdowns leaving those navigation items virtually inaccessible. Worse, each of the hidden anchors still take focus on tab, so the user is left blind until they've tabbed enough to get to the next top-level navigation item.

The code below selects all the anchor elements in dropdown menus and adds focus and blur events to them. The focus event adds a class of `dropdown-visible` to the top-level list item that contains the dropdown menu in use at the moment (the same li that is used for styling the hover state to show the menu). It also adds a class of `focused` to the anchor that currently has focus. The blur event will need this to handle itself later.

The blur event removes the `focused` class added earlier, and then checks for another anchor in its menu (indirect sibling) that has the `focused` class. If there's no indirect siblings with that class, it's safe to close the dropdown by removing the `dropdown-visible` class. Otherwise, the dropdown is still active and should not be closed (prevents flicker).

With this code, you only need to edit your CSS to add the same styles already being applied to `li:hover` to `li.dropdown-visible`, so that the dropdown looks the same when focused as hovered.

That's it. Pretty straight forward, but adds a heap of accessibility.

Note: The code below assumes the following hierarchy:

*    div#top-nav
    *    ul
        *    li
            *    a
            *    ul
                *    li
                    *    a

Therefore, the selector '#top-nav ul ul a' selects the very last `a` element; adjust the selector as necessary to work with your situation.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Accessible Dropdown Navigation (Handling Focus with jQuery)

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
dropdown, navigation, jquery

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
JavaScript