PR

FF3、IE8が対応!これがWAI-ARIA

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

WAI-ARIAの全体像

 WAI-ARIAは大まかにいうと、ロール("checkbox"など)と、ステートおよびプロパティ("checked"や"tabindex")の記述の仕方と、ブラウザや支援技術(スクリーンリーダーなど)がそれらをどのように処理するか、について定義した技術資料である、ということができます。

 ロールには次の3つの特性があります。

 1つめは、「その要素が果たす役割を表現する」という点です。例えば、「checkbox」「grid」「dialog」「navigation」などのロールが定義されています。

 2つめは、「要素が現れる文脈が決まっているものがある」という点です。例えば、

の子要素として
がなくてはならない、など、文脈が規定されているものがあります。

 3つめは、「ロールには親子関係(親がもつ性質を子が継承する)がある」という点です。例えば、「checkbox」ロールの子のロールは「radio」ロールであり、「checkbox」ロールが持つ性質は「radio」ロールも同様に持っています。

 ステートとプロパティは次のような4つの特性を持っています。

 1つ目は、ロールに対して下記に関する性質を表現する、という点です。ステートとプロパティは概念的な違いのため区別されていますが機能的には同一のものです。

1. ウィジェットの状態
2. ライブリージョン(動的更新が可能な領域)
3. ドラッグ&ドロップ
4. フォーカス
5. 関係
6. ユーザーインターフェースのプロパティ

 2つ目は、ロールごとに、どのステートやプロパティが設定可能か、また、そのうちどれが必須であるかが決まっている、という点です。例えば、
なら「checked="true"(または"false")」がなくてはならない、「selected="true"(または"false")」も設定可能と、となっています。

 3つ目は、すべてのロールに対して設定可能なステートおよびプロパティがある、という点です。例えば、「"tabindex"」「"hidden"」「"disabled"」などは、すべてのロールに対して設定が可能です。

 4つ目は、親にあたるロールが持つステートおよびプロパティは、子にあたるロールにも設定可能である、という点です。例えば、
は「checked="true"(または"false")」が設定可能であり、
も同様に「checked="true"(または"false")」が設定可能です。

 また、ロールの継承関係はW3Cのサイト(http://www.w3.org/WAI/PF/aria/rdf_model.png)を参照ください(図3:ロールの継承関係のスクリーンショット)。

WAI-ARIAの現状と各ブラウザおよび支援技術のサポート状況

 WAI-ARIAはW3CのWAI(Web Accessibility Initiativeの略)(http://www.w3.org/WAI/)に属する、PFWG(Protocols and Formats Working Groupの略)(http://www.w3.org/WAI/PF/)によって作成されており、2008年2月4日にワーキングドラフトが公開されました。

 7月18日に日立製作所より、エディターズドラフト 2008年5月14日版 日本語訳(http://www.hitachi.co.jp/universaldesign/wai-aria/)や概略(http://www.hitachi.co.jp/universaldesign/wai-aria/Overview/intro-aria.html)、FAQ(http://www.w3.org/WAI/aria/faq.html)が公開されています。また、2008年中に「勧告」となるかもしれないと、FAQ(http://www.hitachi.co.jp/universaldesign/wai-aria/index.html)に書いています。

 WAI-ARIAの動作テストを行うためには、WAI-ARIAに対応しているWebブラウザと支援技術の両方が必要です。2008年8月現在で、筆者が調査した範囲では、各Webブラウザおよび支援技術のサポート状況は次のようになります(※は筆者が実際に試してみた環境です)。

 Webブラウザでは、FireFoxのバージョン3(http://mozilla.jp/firefox/)(※)と、IEの現在公開中のIE8β(http://www.microsoft.com/windows/products/winfamily/ie/ie8/getitnow.mspx)(参考:Internet Explorer 8 Readiness Toolkitでの「WC3's ARIA Support」の部分(http://www.microsoft.com/windows/internet-explorer/beta/readiness/developers-new.aspx#w3c))や、Operaのバージョン9.5(http://jp.opera.com/)(参考:Introduction to WAI ARIA(http://dev.opera.com/articles/view/introduction-to-wai-aria/))がWAI-ARIAをサポートしています。

 また、Safari(http://www.apple.com/jp/safari/)のHTMLレンダリングエンジンWebKit(http://webkit.org)も、今後WAI-ARIAのサポートをすることを表明しています(参考:GNOME Desktop and Developer Platform MLへの投稿(http://mail.gnome.org/archives/desktop-devel-list/2008-April/msg00225.html))。

 なお、FireFoxは1.5以降から一部対応していましたが、マークアップの記述方法が最新の仕様と異なっていますので注意が必要です(参考:Mozilla Developer CenterのAccessible Rich Internet Applicationsのページ(http://developer.mozilla.org/ja/Accessible_DHTML))。

 スクリーンリーダーでは、Window Eyes(Windows用)(http://www.gwmicro.com/Window-Eyes/)のバージョン5.5以降で大部分が対応済みです(バージョン7で筆者も試しました)。

 JAWS英語版(Windows用)(http://www.freedomscientific.com/fs_products/software_jaws.asp)のバージョン7.1以降でも一部対応済みです(バージョン9で筆者も試しました)。JAWS英語版は日本語音声合成エンジンを使用し日本語読み上げも可能です。

 JAWS日本語版(Windows用)(http://www.extra.co.jp/jaws/index.html)は、今年秋発売予定のバージョン9で対応予定です(開発元のエクストラに確認済み)。

 Orca(Linux用)(http://live.gnome.org/Orca)は、バージョン2.20(※)以降で大部分を対応済みです。

 NVDA(Windows用)(http://www.nvda-project.org/)は、バージョン0.6 P2でライブリージョンの基本部分の実装を開始しました。(IAccessible2が必要)(参考:What's new in 0.6p2(http://www.nvda-project.org/releases/nvda_0.6p2_changes.txt))

 読み上げブラウザでは、Fire Vox(Windows・Mac・Linux用)(http://firevox.clcworld.net/)のバージョン2.7以降(※)で、主にライブリージョンを対応済みです。Fire Voxは、日本語音声合成エンジンを使用し日本語読み上げも可能です。

 拡大鏡では、ZoomText(Windows)(http://www.aisquared.com/)のバージョン9.1以降で一部対応済みとなっています。

 FireFoxを使った場合の、各支援技術のロール、ステート、プロパティごとの対応状況を、Mozilla Developer CenterのAccessible Rich Internet Applicationsのページ(http://developer.mozilla.org/ja/Accessible_DHTML)で確認できます。

 JavaScriptライブラリのDojo Toolkit(http://dojotoolkit.org/)が提供するJavaScriptウィジェット「Dijit」はWAI-ARIAに対応済みのマークアップを生成します(サンプル(http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/))。jQuery(http://jquery.com)もWAI-ARIAのサポートを開始しました(参考:JQuerySprint/dev(http://docs.jquery.com/JQuerySprint/dev))。Ext JS(http://extjs.co.jp)は、次期バージョン3.0のロードマップにWAI-ARIA対応予定しています(参考:Ext JS Road Map(http://extjs.com/products/extjs/roadmap.php))。

 このように、WAI-ARIAをサポートするWebブラウザ、支援技術は徐々にそろいつつあります。

 次回は、WAI-ARIAのライブリージョンを中心に解説していきます。

株式会社アークウェブ
取締役 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会員サービスの概要とメリットをチェック

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