1

私は現在、ウェブサイトをよりアクセシブルにするためのプロジェクトに取り組んでいます。その点で、tabindex/tab order に関連する問題に遭遇しました。メニュー ボタンをクリックすると、2 つのタブを持つメニューバーを含むサブメニューが表示されます。これらの各タブをクリックすると、別のサブメニューが表示されます。私が欲しいのは、メニューをクリックしたときに最初のタブに直接フォーカスできるようにすることです。最初のタブがフォーカスされると、このタブと 2 番目のタブの間をタブで移動し、Enter キーを押していずれかを選択できるようになります。

アイテムが選択されたら、タブを押すと、選択したタブに表示されるサブメニューのすべてのアイテムが引き続き表示されます。このために次のコードを作成しました。

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

タブを押してタブ2に移動し、次にシフト+タブでタブ1に戻って選択しようとすると、問題が発生します。次に、そのサブメニューでさらに下にタブを移動することはできません-再びタブ2に直接タブ移動し、サブメニューでさらに続行します。選択時にサブメニューのタブの最初の要素に明示的にフォーカスを設定しようとしましたが、これも機能しません。これを機能させる方法について誰か提案がありますか?

更新: 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.**
4

0 に答える 0