第4回 自作ウィジェットをアクセシブルにせよ！

jQuery UIで作ったタブインターフェースをアクセシブルにせよ!

　今回は、Ajaxウィジェットをアクセシブルにするという作業がどういったものかを見ていきます。題材として、jQuery UI（http://ui.jquery.com）というjQueryのライブラリを使用して「タブ」切り替えユーザーインターフェースのサンプルを用意し、これに下記の2段階で改良を行っていくことで、アクセシブルにしていきます。

1.タブとしての読み上げが可能にする
2.キーボードだけで操作が可能にする

　サンプルはこちらからダウンロード（http://www.thinkit.co.jp/images/article/133/4/13341.zip）できますので、参照ください（13341.zip/1.87 MB）。ライセンスはGPL version 2になります。

アクセシブルではないタブウィジェットの解説

　まずはじめに、図1を確認してください。以降では、このサンプルをアクセシブルにしていくことになります。

　今回も前回（http://www.thinkit.co.jp/article/133/3/）と同様に、有限会社エクストラ（http://www.extra.co.jp/）のご協力をいただき、開発中のJAWS for Windows Version 9 日本語版とFireFox 3にて実行をしています。なお、日本で広く利用されているPC Talker（http://www.pctalker.net/）は、現状WAI-ARIAに未対応ですがW3Cの「勧告」になる時期に合わせて順次対応を予定しているということです。

　まだWAI-ARIAに対応していないため、読み上げ結果を聞いてみると、「タブ」ではなく「3個リスト」「ページ内リンク」などと読み上げられています。

　今回のサンプルは、基本的には、jQuery UIの「UI/Tabsのもっとも基本のサンプル（http://docs.jquery.com/UI/Tabs#source）」に沿って作成しています。

　以下、注意すべき点をピックアップして解説します。

　まず、下記のように、「野菜」「肉」「果物」の3つのタブにあたるマークアップを用意しています。

<ul><li><a href="#vegetable"><span>野菜</span></a></li>
<li><a href="#meet"><span>肉</span></a></li>
<li><a href="#fruit"><span>果物</span></a></li></ul>

　ライブラリの制約により、このように、<ul>、<li>、<a>、<span>を使った構造である必要があります。このため、「3個のリスト」「ページ内リンク」のように読み上げされています。

　タブ内コンテンツは次のように用意しています。

<div id="vegetable">野菜のコンテンツ</div>
<div id="meet">肉のコンテンツ</div>
<div id="fruit">果物のコンテンツ</div>

　このように、UI／Tabsは、タブのhref属性のページ内リンクと、タブ内コンテンツのid値を対応させることで、タブの開閉を実現する仕組みになっています。

　このタブ内コンテンツは、例えば「野菜」のタブがアクティブになると、下記のみが表示され、それ以外は非表示になります。

<div id="vegetable">野菜のコンテンツ</div>

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

　次のページでは、このサンプルをWAI-ARIAに対応させ、「タブ」として正しく読み上げできるようにします。