キーボード操作が可能なタブウィジェットの解説

キーボード操作が可能なタブウィジェットの解説

　ここからは、サンプルをキーボードで操作可能にするための実装方法を見ていきます。先に、図3を確認してください。このサンプルでは、左キー、右キー、タブキーによる操作が可能になっています。

　それでは、まずタブキーによる操作の実現方法から確認していきましょう。

　まず、に「tabindex="-1"」を指定します。こうすることで、TABキーを押してもにフォーカスがあたらないようになります。



　次にタブが選択された際（tabsselectイベント（http://docs.jquery.com/UI/Tabs#Events）発生時）に、下記のようにして、全タブをTABキーでフォーカスがあたらないようにします。

$("span[role='tab']").attr('tabindex', '-1');

　フォーカスがあたらないようにした後、下記のように、選択されたタブだけ、TABキーによるフォーカスを可能にし、フォーカスをあてています。

$(ui.tab).find('span').attr('tabindex', '0').focus();

　同様に、下記のようにして、すべてのタブ内コンテンツをTABキーでフォーカスがあたらないようにします。

$('.ui-tabs-panel').attr('tabindex', '-1');

　フォーカスがあたらないようにした後、下記で、選択されたタブのタブ内コンテンツだけ、TABキーによるフォーカスを可能にします。

$(ui.panel).attr('tabindex', '0');

　ここまでで、アクティブなタブとタブ内コンテンツを、TABキーや、Shiftキー + TABキーで行き来することができるようになります。

左右矢印キーによるタブの切り替えの解説

　次に、左右矢印キーによるアクティブなタブの切り替えの実現方法を確認していきましょう。

　下記のようにして、タブにフォーカスがあたっている状態で、左矢印キーが押されれた場合の処理を記述します。

$("span[role='tab']").bind('keydown', 'left', function(e){
…処理…
}

　左右矢印キーが押された時の処理内容は次のようになります。

1.現在アクティブなタブを判定
2.次にアクティブにすべきタブを決定
3.そのタブをアクティブ化

　下記のようにして、現在アクティブなタブを判定します。

if ($(e.target).text() == '野菜') {
} else if ($(e.target).text() == '肉') {
} else if($(e.target).text() == '果物') {}

　「野菜」がアクティブだった場合、次にアクティブにすべきタブを次のように指定しています。

if ($(e.target).text() == '野菜') {
target = $("a:contains('果物')").get(0);
}

　同様に、「肉」「果物」がアクティブだった場合の、次にアクティブにすべきタブについてもロジックを記述します。

　最後に、アクティブにすべきタブに対して、jQueryのclick()（http://docs.jquery.com/Events/click）メソッドでクリック動作を発生させてタブのアクティブ化を行います。

$(target).click();

　ここまでで、左右矢印キーを押すと、タブが切り替わるようになります。

　以上で、キーボード操作の実現し、アクセシブルなタブウィジェットが完成しました。

　ここまでのソースコード全体をダウンロードしたファイル「tab-3.html」で確認してみましょう。

　これまでWAI-ARIAの概要から実践的な構築まで4回にわたり連載をしてきました。紹介した、ロール、ステート、プロパティはごく一部のものですが、これまで解説してきた知識があれば、ほかのものもそれほど苦労なく理解できると思います。