jquery - jQuery のアクセシビリティ - サイトをタブで移動

Question

サイトにタブ フォーカスを作成しようとしています。ユーザーがタブ キーを押すたびに、フォーカスはページの次の項目に移動します。

これは ie (バージョン 9 と 8 でテスト済み) では問題なく機能しますが、FF ではフォーム要素でのみ機能します。

jqueryを使用して、これをより普遍的に機能させることはできますか?

ありがとう。

Answer 1

タブ可能にしたいものすべてに属性を与えますtabindex="0"

例：

<b tabindex="0">Tabbable Title</b> 
<p tabindex="0">My tabbable content</p>
<div tabindex="0" style='height: 100px; width: 100px; border: 1px solid red;'></div>

デモ ここでは、'Tabbable Title' テキストをクリックし、TAB を押して先に進み、Shift+TAB を押して要素間を戻ります。

これにより、各要素がページに表示される順序でタブ表示されます。また、tabindex に 0 以外の数値を指定することで、独自のタブ オーダーを指定することもできます。これは、1 から 2 から 3 などのタブになります。

Answer 2

はい、できます。jQuery を使用すると、以下を使用できます。

$(function() {            
    if($.browser.mozilla) 
        $('*').attr('tabindex', 0);
});