PR

自作ウィジェットをアクセシブルにせよ!

2008年9月25日(木)
志田 裕樹

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つのタブにあたるマークアップを用意しています。



 ライブラリの制約により、このように、
株式会社アークウェブ
取締役 CTO。2004年1月より株式会社アークウェブの創業スタッフとして勤務。SEとしてさまざまなWebシステムの構築に従事。オープンソースコミュニティーZen Cart.JPにてコミッターの役割を務め、Zen Cart、Ajax、Ruby on Railsなどの記事執筆も行っている。http://www.ark-web.jp/

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています