CODEWITHSUNDEEP
drop-down-menuaccessibilityzurb-foundationnav
cgslav
cgslav

Reputation: 113

zurb-foundation top-bar dropdown not accessible from keyboard

I'm making site compatible with WCAG 2.0 based on Foundation and I've got problem with topbar.

It's just not operable with keyboard and I'm talking only about 'tab' key.

My parent item is set to '#':

Item 1 (#)

--> Item 2 (link)

--> Item 3 (link)

After selecting Item 1 with 'tab' key nothing happen, hitting enter won't help.

Changing menu to clickable it's not an option because items don't collapse after clicking another one.

Mobile menu is fine and so examples in Foundation docs.

Here is example: http://dwietrzecie.zz.mu/bobrowice/

Thanks for any help!

Upvotes: 1

Views: 1422

Answers (1)

saltavenger
saltavenger

Reputation: 116

This is not a timely answer, but since I was googling for the same question and came up with my own solution I thought I would post it:

1) Add tabindex=0 to all the links in your navigation

2) All the hovers in the css need to have equivalent focus selectors. You will also need to add a hover class so you can use javascript to tell it when to pop out. I added this in my css to get the menus to show (you should also enter additional code equivalents for styling-- any hover styling needs focus styling, but mine is customized so I don't want to post my styles): 

.top-bar-section .has-dropdown.hover > .dropdown,
.top-bar-section .has-dropdown.not-click:focus > .dropdown,
.no-js .top-bar-section .has-dropdown:focus > .dropdown,
.dropdown.hover
  {
      display: block; }

3) Added javascript that takes the 'hover' class I created w/ the css and adds and removes it when the focus changes. I used this site as a reference http://uablogs.missouri.edu/interface/2011/08/keyboard-accessible/

$(document).ready(function(){
    $.fn.accessibleDropDown = function ()
    {
        var el = $(this);
        /* Make dropdown menus keyboard accessible */

        $("a", el).focus(function() {
            if($(this).parent().hasClass('has-dropdown')){
                $(this).parent().find('.dropdown').addClass('hover');
            }
            else if(($(this).parent().parent().hasClass('dropdown') === false)){
                $(document).find('.dropdown').removeClass('hover');
            }
        }).keydown(function(e){
            //if tab is pressed but not shift
            if(e.keyCode == 9 && !e.shiftKey){
                //and element is the last child in menu
                if($(this).parent().is(':last-child')){
                    $(this).parent().parent().removeClass('hover');
                }
            }
        });
    }

    //adds keyboard control to navigation
    $('nav').accessibleDropDown();

    $(document).click(function(){
        //if someone uses keyboard and switches to mouse close menu if mouse click isn't focused on a navigation element 
        if($('nav a').is(':focus') === false){
            $('.dropdown').removeClass('hover');
        }
    });
});

It is now keyboard accessible with tab and shift tab keys. It could use the addition of a skip nav IMO.

Upvotes: 1

Related Questions