ブラウザのフォームに焦点を当てるために、デフォルトのタブ動作をオーバーライドします。

Question

アクセシビリティ上の理由からキーボードナビゲーションに準拠しなければならない最初のアプリケーションを構築しています。

私の問題は、jquery-uiモーダルダイアログボックスを使用することです。ユーザーがダイアログの最後のコントロール（このアプリケーションのキャンセルボタン）のタブを押すと、ダイアログボックスの外にフォーカスが移動します。または、ダイアログボックスの最初のコントロールのshift-tabを押します。

ユーザーがこれを行うと、必ずしもダイアログボックスに戻ることができない場合があります。 IE8とFF8はこの点でやや異なって動作します。私は、次のイベントハンドラでタブキーを捕獲しようとした -

lastButton.keydown(function (e) { 
    if (e.which === TAB_KEY_CODE) { 
     e.stopPropagation(); 
     $(this).focus(); 
    } 
}); 

しかし、jqueryのが行われた後、ブラウザがキープレスを処理表示されますので、これは動作しません。

つの質問 - アクセシビリティの遵守のために

1. 、私もこのことを心配する必要はありますか？しかし、使い勝手の理由から、私はそうすべきだと思います。
2. これを行う方法はありますか？

Answer 1

たぶん、あなたは伝播を停止する代わりにpreventDefault()でデフォルトのアクションを阻止すべきであるとのKeyDownの代わりにキー操作を使用しています。
このように、フォーカスを取り戻す必要はありません。

伝播を停止すると、イベントのバブリングが防止されるだけなので、機能しません。あなたはstopImmediatePropagation（）を使用することについて考えることができますが、タブの押下で入力を変更するとそのように停止することはできず、preventDefault（）はより正しいと思います。ここ

lastButton.keypress(function (e) { 
    if (e.which === TAB_KEY_CODE) { 
     e.preventDefault(); 
    } 
}); 

フィドル：http://jsfiddle.net/jfRzM/

Answer 2

私の問題は、jqueryの-UIモーダルダイアログボックスを行う必要があります。ユーザーがダイアログの最後のコントロール（このアプリケーションのキャンセルボタン）のタブを押すと、ダイアログボックスの外にフォーカスが移動します。または、ダイアログボックスの最初のコントロールのshift-tabを押します。

...そして、いくつかのキーを押した後にスクロールバーが下から上にジャンプする灰色の半透明レイヤの下で、モーダルボックスの下でタブ移動が発生しますか？はい、キーボードを使用してブラウズして、Tabを100回押さずにモーダルボックスに戻る方法を知らない目に見えるユーザーにとっては、これは懸念事項です。目の不自由な人は、モーダルボックスがまだ表示されていることを知りません（彼らはスクリーンリーダーでDOM全体を見る/聞くことができます）、ページ/スクリプトは送信またはキャンセルの決定を待っているので、 。

右の例はhttp://hanshillen.github.com/jqtest/#goto_dialogです（[ダイアログ]タブをクリックし、アンカーで直接リンクできません：/）。それはモーダルボックスの内側を永久にタブで閉じるか、OKをクリックすると、モーダルボックスをトリガしたフォーカスされた要素に戻ります（モーダルボックスを離れると次のフォーカス可能な要素にフォーカスする必要がありますが、ここで最大のアクセシビリティ問題です）。
この一連のスクリプトはjQueryUIに基づいており、キーボードやARIAサポート、および元のスクリプトに存在する可能性のあるアクセシビリティの問題が大幅に改善されています。強くお勧めします！（私はjQuery UIオリジナルのスクリプトとこれらのスクリプトを混在させようとしましたが、何も動かないようにしましたが、そうする必要はありません：