1

私は現在、アクセス可能でなければならない AJAX アプリケーションを開発しています (WGAG 2.0、AA)。

スクリーン リーダーを使用してアプリケーションをテストしています (今のところ、Mac Os X では Voice Over)。

ナビゲーションは一連のボタンで構成されています。ユーザーがボタンをクリックすると、JavaScript はコンテンツがページに追加されているかどうかを確認し、追加されていない場合は AJAX 呼び出しを実行し、ページに新しい div を追加し、以前の要素を非表示にして新しいコンテンツを表示します。これは正常に機能します。 .

私が抱えている問題は、ボタンが押されたときにユーザーがコンテンツに直接移動するようにすることです。そのため、ユーザーはボタンにカーソルを置いたままにするのではなく、コンテンツを直接読むことができます (したがって、今のところ、クライアントがボタンを押すと、ローダーされたコンテンツを読み取る代わりに、カーソルはボタン上にとどまります)。

私は試した：

$(id).attr("tabindex",-1).focus();

と

$(id).focus();

ここで、id は id 値を含む変数です (右側のセレクター「#」を使用)。

ボタンを 2 回クリックしたときに、2 つの要素の tabindex が -1 に設定されているためだと思いますが、よくわかりません。

誰かが私がどのアプローチを使用すべきか知っているかどうか疑問に思っていますか?

アップデート **

同じページ (AJAX アプリケーション) には、この機能が必要な場所が 2 つあります。最初の部分は、tabindex を -1 に設定すると問題なく動作するウィジェットです。

プレイスⅠ

html

<div id="audience-list" class="with-shadow">
    <div id="group-links">
        <div id="confirm-dialog" class="toolBar">
            <button id="cancelBtn">
                Cancel
            </button>
            <button value="group-1" class="highlighted" id="confirmBtn">
                Confirm
            </button>
        </div>
        <div class="d4p-no-ajax group-link selected">
            <div class="span-4 prepend-top">
                <div class="box square with-outset with-large-radius">
                    <div id="apuo" role="button" class="choose-group-button">
                        <h2>My group</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

javascript (昨日学んだことから、クリック機能を on に置き換える必要があります。実行しますが、これで問題なく動作しています)。ユーザーがボタンをクリックすると、キャンセル ボタンと確認ボタンを保持する div に送信されます。これはうまくいきます！

$(".choose-group-button").click(function(e){

    $('#confirm-dialog').addClass('enabled').attr("tabindex",-1).focus();

});

PLACE II、うまくいかない

html: リンクとボタンを使用してさまざまなシナリオを試しましたが、これ以上のチャンスはありませんでした。リンクまたはボタンをクリックするときは、href で参照されている div (これが dom コンテンツです。アンカーは変更されています #avantages -> #/avantages が変更されています) または ID コンテンツを含む div に tabindex する必要があります。容器

<div>

    <div id="ico-avantages" class="box box-ico square">
        <span class="ico"></span>
        <a id="d4p-link15" href="#/avantages">
            Avantages sociaux 
        </a>
    </div>

    ...

    <div class="clear">
    </div>
</div>
<div id="content-container">
    <div id="avantages">
    ...
    </div>
    ...
</div>

ジャバスクリプト

$('.box-ico a').each(function(){
    $(this).click(function(){
        $('#content-container').attr('tabindex', -1).focus();     
    });
});

tabindex は -1 に設定され、画面は div までスクロールしますが、この場合のスクリーン リーダーはリンク レベルに留まり、同じページの 1 の場所では問題なく動作します。フォーカスを得るために div に適用する必要がある、より具体的な条件があるかどうか疑問に思っています。

4

1 に答える 1

4

Tabindex 0 および -1 は、正の整数とは異なる動作をします。tabindex に関する Snook の投稿が役立つかもしれません。ページ上の複数の要素にtabindex="-1". 私は の専門家ではありません<buttons>が、通常はフォームの送信とナビゲーションのためのものなので、最初の提案はボタンを通常のリンクにすることです。

<a href="#myID">Jump to Section name</a>
...
<div id="myID" tabindex="-1">
...
</div>

別のトリックを行う必要があるかもしれません

<a href="#myID">Jump to Section name</a>
...
<div>
 <a name="myID" id="myID" tabindex="-1"></a>
...
</div>
于 2013-03-05T19:34:38.977 に答える