WAI-ARIAによるアクセシブルRIA 第4回

タブとして読み上げ可能なタブウィジェットの解説

　次に、先ほど紹介したサンプルをWAI-ARIAに対応させて、「タブ」として正しく読み上げできるようにしていきます。まずはじめに、図2を確認してください。このサンプルでは、「野菜、タブ」などと読み上げられるようになっています。

　では変更点を解説していきましょう。

　まず、

に、「tablist」ロールを設定しています。

　後述する「tab」ロールをもつ要素は、必ず親要素として、「tablist」ロールをもつ要素を要求するため、この記述を追加する必要があります（参考：tablistの解説（

http://www.hitachi.co.jp/universaldesign/wai-aria/ED_20080514/#tablist

、に「presentation」ロールを設定しています。
…略…

http://www.w3.org/TR/wai-aria-practices/#kbd_layout_impact_mode_css

タグに「presentation」ロールを指定すると、JAWSは、「リスト」と読み上げなくなります。タグはまだ読み上げられてしまいます。

　次に、タグに「tab」ロールを設定しています。

野菜

　これにより、「野菜、タブ」と読み上げるようになります。

　また、タグには前回（http://www.thinkit.co.jp/article/133/3/）に説明した「tabindex="-1"」が指定されています。これは、下記のコードのように、タブ選択時（UI／Tabsのtabsselectイベント発生時（http://docs.jquery.com/UI/Tabs#Events））に選択されたタブにフォーカスをうつすために必要です。

$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
$(ui.tab).find('span').focus();
});

　このようにすることで、タブをクリックして選択しても、フォーカスがに移るため、タグの「ページ内リンク」の読み上げがされなくなります。

　タグ内コンテンツには「tabpanel」ロールを指定します。

aria-labelledby="vegetable_tab">
野菜のコンテンツ

　「tabpanel」ロールの要素は、対応するタブのID値を「labelledby」プロパティで指定することが推奨されます。「labelledby」プロパティは、現在の要素をラベル付けしている要素を明示するプロパティです（参考：labelledbyの解説（http://www.hitachi.co.jp/universaldesign/wai-aria/ED_20080514/#tabpanel））。

　ここまでのソースコード全体をダウンロードしたファイル「tab-2.html」で確認してみましょう。
Hotkeysプラグインによるキーボードショートカットの設定
　ここまでで、サンプルはタブとして読み上げが可能な状態になりました。

　ここからは、サンプルをキーボードで操作可能にしていきます。WAI-ARIA Best Practices（http://www.w3.org/TR/wai-aria-practices）という開発者向けドキュメントがありますが、この中の「タブ」の実装の手引き（http://www.w3.org/TR/wai-aria-practices/#TabPanel）の部分に、どのようにして、キーボードで操作できるようにべきかが記述されています。これを参考にして仕様を決定します。

　今回は、下記のキーボード操作を実現しました。

・TABキー：タブからタブ内コンテンツにフォーカスをうつす
・左矢印キー：現在のタブの左隣のタブをアクティブにする
・右矢印キー：現在のタブの右隣のタブをアクティブにする

　ただし、もっとも左のタブがアクティブな時に、左矢印キーを押すと、もっとも右のタブがアクティブになります。右矢印キーの動作はその逆です。

　jQueryのHotkeysプラグイン（http://code.google.com/p/js-hotkeys/）を利用すると、キーボード操作を簡単に処理することができます。

　Hotkeysプラグインを使用することで、次のような簡単な記述で、特定の要素に対する、特定のキーの、キーダウンイベントを処理することができるようになります。

$(document).bind('keydown', 'Ctrl+c', fn);

　Hotkeysプラグインのサイト上のサンプル（http://jshotkeys.googlepages.com/test-static-01.html）を見ると、非常にさまざまなキーの組み合わせが設定可能なことが確認できます。

　次のページでは、キーボード操作の具体的な実装方法を見ていきます。