1

確認ダイアログがあり、アクセスできるようにしたいと考えています。ここに私のHTMLがあります:

<div class="confirm-dialog row-fluid">
<div class="content" role="dialog" tabindex="0" aria-labelledby="confirm-popup-header" aria-describedby="confirm-popup-subheader">
   <h2 id="confirm-popup-header">Proceed with an action</h2>
   <h4 id="confirm-popup-subheader">You are about to proceed with an action</h4>
   <div>
       <button class="btn btn-large btn-primary btn-app-secondary">Cancel</button>
       <button class="btn btn-large btn-primary btn-app-primary">Submit</button>
   </div>
</div>

また、スクリプトのどこかで、ダイアログが表示されたときにダイアログにフォーカスを設定しています。

$('.confirm-dialog .content').focus();

IE11 でダイアログが開かれると、jaws は次のような内容を読み取ります: Enter - アクションを続行します - ダイアログ アクションを続行します アクションを続行しようとしています キャンセル ヘッダーレベル 2 を送信します

JAWS は、最初にヘッダーを読み取り、次にヘッダーを読み取り、次に残りのコンテンツを読み取ります。これが問題です。

期待される動作: Enter - アクションを続行 - ダイアログ アクションを続行しようとしています。

それはどのように達成できますか？

4

1 に答える 1

1

aria-labelledbyダイアログコンテナ要素からとを削除するだけaria-describedbyで、はるかに良くなるはずです。ベスト プラクティスとして、tabindex=0 の代わりに tabindex=-1 を設定することもお勧めします。これにより、ダイアログ内でタブ移動したときに、自動的にコンテナーに戻らなくなります。

既にこれを行っているかもしれませんが、キーボード イベント ハンドラを使用してダイアログ内にフォーカスを維持する必要があります。

于 2015-01-23T18:39:27.640 に答える