Question

我目前正在开展一个项目，以使网站更易于访问。在这方面，我遇到了与tabindex / tab顺序相关的问题。单击一个菜单按钮，将显示一个子菜单，其中包含带有两个选项卡的菜单栏。单击这些选项卡时，每个选项卡都会显示另一个子菜单。我想要的是能够在单击菜单时直接聚焦在第一个选项卡上。第一个选项卡获得焦点后，应该可以在此选项卡和第二个选项卡之间来回切换，然后按Enter键选择其中一个选项卡。

选择项目后，按Tab键将继续浏览为所选选项卡显示的子菜单中的所有项目。我为此创建了以下代码：

    // 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();
    });

如果我按Tab键转到tab2，然后尝试将+ tab切换回tab1并选择它，则会出现问题。然后它不允许我在它的子菜单中进一步向下 - 它再次直接返回tab2，然后继续进入它的子菜单。我已经尝试在选中时明确将焦点设置到子菜单中的选项卡第一个元素，但这也不起作用。有没有人建议如何使这项工作？

更新：HTML看起来像这样

    <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.**

菜单标签顺序使用tabindex进行辅助功能

0 个答案: