1

I am currently working on a project to make a website more accessible. In that regard I have encountered a problem related to tabindex/tab order. A menu button, once clicked, displays a submenu containing a menubar with two tabs. Each of these tabs, when clicked, displays another submenu. What I want is to be able to focus directly on the first tab when the menu is clicked. Once the first tab has gotten focus, one should be able to tab back and forth between this and the second tab, and select either one of these by pressing Enter.

Once an item has been selected, pressing tab should continue to go through all the items in the submenu displayed for the selected tab. I have created the following code for this:

    // First set the tabindex for both tabs to 0 to be able to
    // tab through them sequentially
    $('#tab1').attr("tabindex", 0);
    $('#tab2').attr("tabindex", 0);

    // Set focus on the first tab once the main menu link has been clicked
    $('#menulink').click(function({ $('#tab1').focus(); });

    // Select appropriate tab when ENTER is pressed
    $('#tab1').keydown(function(event) { 
        if(event.which == 13) { event.preventDefault(); }
        $('#tab1').click();
    });
    $('#tab2').keydown(function(event) {
        if(event.which == 13) { event.preventDefault(); }
        $('#tab2').click();
    });

The problem occurs if I press tab to go to tab2 and then try to shift+tab back to tab1 and select that. Then it wont allow me to tab further down in it's submenu - it tabs directly back to tab2 again, and then continues further on in it's submenu. I have tried to set focus explicitly to the tabs first element in the submenu when selected, but this doesn't work either. Does anybody have a suggestion on how to make this work?

Update: The HTML looks like this

    <a href="#" id="**menulink**" class="actionDropDownList menulink" title="Hovedmeny">
            Hovedmeny</a>
        <div id="mainMenu">
            <div id="mainMenuPositionWrapper">
                <div id="mainMenuGfxTop"></div>
                    <div id="mainMenuWrapper">
                        <div id="mainMenuBgWrapper" class="clearfix">
                            <!--Menubar with tabs-->
                            <ul id="swapMenu" style=" ">
                                <li><a id="**tab1**"><span>Privat</span></a></li>
                                <li><a id="**tab2**"><span>Bedrift</span></a></li>
                            </ul>
                            <!--TAB1 submenu-->
                            <div id="**tab1_submenu**">
                                <dl class="firstColumn">
                                    <dt><a xmlns="" id="tab1submenu_item1">Lån og 
                                    eiendom</a></dt>
                                    <dd><a xmlns="" id="tab1submenu_item2">Boliglån ung               
                                    </a></dd>...**more menuitems follows.**
                            <!--TAB2 submenu-->
                            <div id="**tab2_submenu**">
                                <dl class="firstColumn">
                                    <dt><a xmlns="" id="tab2submenu_item1">Lån og 
                                    eiendom</a></dt>
                                    <dd><a xmlns="" id="tab2submenu_item2">Boliglån</a>
                                    </dd>...**more menuitems follows.**
3
  • It woul be helpful to see the HTML
    – steveax
    Jan 12, 2013 at 19:54
  • I have added the HTML, steveax. Hope it helps.
    – nils1k
    Jan 13, 2013 at 9:12
  • Why are you using a definition list? It is bad to use syntaxically. Maybe check out the YUI Menu
    – Ryan B
    Jan 14, 2013 at 13:47

0

Your Answer

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

Browse other questions tagged or ask your own question.