Accessible Rich Internet Applications

Accessibility Rich Internet Applications(ARIA) の Firefox による実装は、ツリービューやメニューバー、表計算などのデスクトップスタイルのウィジェットを、キーボードとスクリーンリーダや拡大鏡、代替入力機器などの支援技術から利用可能にします。また、ページ上で一部を AJAX スタイルのライブアップデートを行う際のアクセシビリティの解決策を提供します。

ARIA は、以前は DHTML アクセシビリティとして知られており、W3C - World Wide Web Consortium にて開発中の標準です。すべての文書は Protocols and Formats Working Group 公式ページ で利用可能です。ここには、ARIA ロードマップ および ARIA roles 仕様, states モジュール が含まれます。

Firefox における ARIA のためのソースコードは IBM によって寄贈されています。

また、ARIA のよくある質問とその答え(FAQ) もご覧ください。

ARIA の例は Firefox の実装で説明することができます。コミュニティが W3C の Protocols and Formats グループがいくつかの標準化プロセスを経て ARIA 実装へと移行するのを待つ間、今日のウェブサイトはすでに Firefox の ARIA サポートを利用して書かれています。バグ修正と小さな改良は続いており、Firefox における ARIA サポートは進化し続けています。

キーボードによる操作

キーボードナビゲーションは二通りの方法でサポートされています:

1. HTML の tabindex 属性を通して、どの HTML 要素へもタブで移動可能にし、また少なくとも、スクリプトやマウスを通してフォーカスすることができます。タブで移動可能な要素と単にフォーカス可能な要素を区別することによって、コンテナ内の子要素を矢印キーを使って移動できる、ツリービューや表計算のようなコンテナウィジェットを開発することができます。現在、これは Internet Explorer や Firefox, Opera で動作します。Safari では動作しません。キーボードから操作可能な DHTML ウィジェットの tabindex コードの書き方は、Practical documentation on building key navigable custom widgets を参照してください。
2. aria-activedescendant 属性を通して。これを利用すると、とても簡単です。(例えば、list や tree, grid などの) コンテナウィジェット 上に tabindex="0" を置くだけで、ウィジェットがタブの移動順に追加されます。そして、aria-activedescendant="[id]" 属性を持つ、現在フォーカスされたものの子孫にフォーカスが移ります。コンテナウィジェット上の keydown ハンドラは、そのフォーカスが移った子孫に変更され、現在の項目がそれと分かるように (border や background color によって) スタイル付けされます。この方法は、すべてのブラウザで動作させることができます。この動作を直接描いた例は、listbox example のソースコードをご覧ください。

支援技術のための基本的なサポート

支援技術のサポートには、Firefox 2 以降と、各ウィジェットを記述するために ARIA マークアップを使用するコンテンツを必要とします。例えば、各ウィジェットの種類を指定するために ARIA role を使用する必要があります。ウィジェットの種類にはメニューやスライダー、プログレスバーなどがあります。各 role は、checked および selected, required, invalid, expanded などの追加の property 属性をサポートします。

マークアップ例

ARIA の勧告が変更され、名前空間がマークアップ内で使用されなくなったため、HTML 内で使用できるようになりました。

例えば、checkbox は以下のように指定します:

HTML では (要 Firefox 3)

<span tabindex="0" role="checkbox"
      aria-checked="true"
      onkeydown="return checkBoxEvent(event);"
      onclick="return checkBoxEvent(event);">
  チェックボックスのラベル
</span>

伝統的な名前空間によるアプローチ (サポートされません)

これは、歴史に残しておくための名前空間によるアプローチです。この方法は宣言が使用されるため、XHTML が必要です。Firefox 3 ではサポートされません:

<span tabindex="0" role="wairole:checkbox"
      aaa:checked="true"
      onkeydown="return checkBoxEvent(event);"
      onclick="return checkBoxEvent(event);">
  チェックボックスのラベル
</span>

上記の checkbox はカスタム構成です。しかし、支援技術とユーザに関しては通常の checkbox のように動作します。作者が望めば、CSS を通してビジュアルな外観にすることができます。以下に各属性の意味を解説します:

このマークアップが使用されている例は、ARIA サンプル をご覧ください。Firefox はこれらのマークアップ role と property を MSAA - Microsoft Active Accessibility と ATK - Accessibility Toolkit (from Gnome Accessibility Project) から実装しています。これは、Windows と Linux 上でのアクセシビリティ API 標準です。ウィジェットの情報がアクセシビリティ API 標準を通して公開されているため、支援技術はこれらのウィジェットを用いて、新しいコードなしで多くの互換性を得ることができます。現在、最も完全なスクリーンリーダによるサポートには Window-Eyes 5.5 が必要です。 ZoomText などのスクリーン拡大鏡もまた、ARIA と互換性があります。

Internet Explorer による role や property のサポートは現在利用できません。Internet Explorer は現在、これらのウィジェットのキーボード操作のみサポートしています。支援技術ベンダーは、Internet Explorer を変更せずに DOM と DOM 変更イベントを直接探すことによって、ARIA のセマンティクスをサポートできるようにするべきです。

XHTML と HTML のどちらを選ぶか

XHTML と HTML (または SVG と XUL) のどちらを使用するかという問題はなくなりました。Firefox は名前空間なしの新しいマークアップを、他のものと同じ方法で処理します。content type の心配をしなくても、ARIA マークアップ宣言を使用し、それを他のものと同様に動的に設定することができます。初期の ARIA の扱いに比べれば、これは劇的な向上です!

サンプルウィジェット

キーボードとマウスによる操作をテストする

キーボードまたはマウスによる操作は、Internet Explorer と Firefox のどちらでも可能です。サンプルの HTML バージョンのみが Internet Explorer 上でテストし、動作するように作られているので注意してください。サンプルの XHTML バージョンはそうではありません。

Firefox のアクセシビリティ拡張でテストする

Firefox Accessibility Extension は ARIA role のアクセシビリティをテストする機能を持っています。

スクリーンリーダでテストする

スクリーンリーダのサポートは Firefox 1.5 以降でのみ利用可能です。以下のコンポーネントをインストールする必要があります:

1. Firefox: Firefox からダウンロードしてインストールしてください。
2. スクリーンリーダ: スクリーンリーダでテストするには Window-Eyes 5.5 以降が必要です。加えて、JAWS 7.x が ARIA の一部をサポートしています。また、Orca 2.20 以降が Firefox 3.0 のほとんどの ARIA ウィジェット型をサポートしています。

サンプルはどこにありますか?

注意: 以下の例は、次のセクションの role/property にもあります。

Dojo Toolkit

Dojo 1.0 widget toolkit のすべての Dijit ウィジェットコアは ARIA をサポートしています。スクリーンリーダをサポートする Dojo の例は、Firefox 2 または Firefox 3 で開かなくてはなりません。

イリノイ大学

イリノイ大学の ARIA テストスイートは、スクリーンリーダのサポートに Firefox 3 が必要です。

Mozilla ベアボーンの例

Mozilla.org の ARIA テストページは、ここから学ぶためのいくつかの例を提供しています。スクリーンリーダのサポートは Firefox 3 が必要です:

1. Checkbox, 説明つき Button
2. グラフィカルな slider, 簡単な slider, Progress bar
3. Alert
4. menubar 付きの Grid (spreadsheet)
5. タブパネル
6. Listbox
7. Tree ビュー, Tree ビュー #2

CLC World: live region の例

現在の live region の例 は Fire Vox 内で動作します。Fire Vox スクリーンリーダ拡張の実行は、Firefox のどのバージョンを使用しても問題ありません。

サポートされている role

ここには、Firefox に対応した使用例のある role と 各 role に対応する property の表があります。一部の property は "universal properties" であり、すべての要素上で動作することに注意してください。詳しくは、対応する property のセクションをご覧ください。

他の方法で指示されていない限り、property はブーリアン値で true または false に対応します。ブーリアン値である場合は、値が設定されていない属性には false が設定されます。

ただし、checked および selected, expanded 属性は特別です。属性に false が提供されている場合は、ウィジェットが checkable/selectable/expandable であると指示され、false が無いものとは異なります。

また私たちは、これらの情報を Firefox がどのように Windows(MSAA) や Linux(ATK) 上のアクセシビリティ API を通して公開しているか、技術の詳細を提供しています。

† 下記の表において、適用性の列が "すべての要素" と書かれているすべての要素が universal property を許容します。

代表的な XHTML の role 属性モジュール

XHTML の role 属性モジュール は次の role を定義しています: banner, contentinfo, definition, main, navigation, note, search, secondary, seealso

XHTML では、これらの代表的な role を "wairole:" プレフィックス無しで使用することができます (例: <div role="main">)。理想的なスクリーンリーダーは、これらの role を用いてナビゲーション機構を提供するか、ユーザがメインコンテンツに入ると自動的にナビゲーションを開始します。スクリーン拡大鏡や携帯電話もまた、メインコンテンツから開始するか、特別なハイライトやナビゲーション機構を提供します。しかしながら、これらの role は MSAA 下の role を通じて公開されており、現在ある支援技術には特別なサポートが知られていません。

サポートされている property

Live regions

一部のウェブページには、ユーザのアクションや現実世界のイベントによって更新することができる Live region(動的更新が可能な領域) があります。ユーザのアクションによる変更の例は、この wiki のオプションページです。現実世界のイベントによる変更の例には、チャット領域 や 試合状況のライブ更新, 金融情報のライブ更新 があります。

今のところ、スクリーンリーダの Live region のためのアクセシビリティには問題があります。スクリーンリーダがページ上のすべての変更を逐次読み上げてしまうと、ユーザにとって迷惑になります。もし、スクリーンリーダがそれらを読み上げなければ、ユーザは極めて重要な情報を失うことになります。

解決策は ARIA を通して開発されており、ウェブページの作者がそこにある Live region が何かを指定し、また Live region についての追加の役立つ情報を指定することができます。これは、スクリーンリーダが何をいつ読み上げればよいかを決められるようにします。

これらの ARIA プロパティには、aria-live および aria-atomic, aria-relevant, aria-controls, aria-labelledby, aria-describedby があります。現在のサポートは、標準仕様の執筆活動を前進させ、ウェブ開発者コミュニティに対して WAI-ARIA を採用する利点を実証し、またスクリーンリーダ開発者コミュニティがエンドユーザに WAI-ARIA の 動作を体験できることを示すため、Fire Vox スクリーン読み上げ拡張機能で開発されています。

さらに詳しい情報:

• Live region マークアップの開発状況の完全なリポートは、AJAX:WAI_ARIA_Live_Regions をご覧ください。ここでは、Fire Vox で動作するテストケースへのリンクも提供しています。
• テストケースの簡単なものと詳細なもの は、Fire Vox 拡張の開発者である Charles Chen 氏によって提供されています。これらの例はすべて、Fire Vox で動作します。
• その他のマークアップの記述は、Gez Lemon 氏による Juicy Studio の ARIA live region についての記事にあります。

Firefox 3 の登場までに、Live region がスクリーンリーダのすべての目的に対応することは期待されていません。

ARIA のための標準開発

W3C の Web Accessibility Initiative の中身は Protocols and Formats Working Group (PFWG) です。このグループは、Dynamic Web Content Accessibility Work roadmap と呼ばれるものに大きく焦点を当てており、すべての重要な格差を埋める長期的な努力と同時に、基本的な role および properties を定義する短期間の努力をしています。

Firefox の公開バグ

完全な Firefox の ARIA バグ一覧 では、Firefox の ARIA 対応の進捗を追跡することができます。

将来の ARIA

追加の ARIA サポートは将来のリリースで計画されています。この作業は W3C PF グループの安定した標準から得ることに依存しています。これらの変更には、作者が既存の role を継承して新しい role を定義したり、動作を記述したり、要素間の関係を新たに指定したり、またブラウザと Web ページの間でのキーボード・アクセラレータの今日のような衝突を避けるセマンティック・アクセスキーのサポートが含まれます。

ARIA IRC チャンネルとメーリングリスト

WAI-ARIA について公共の場で討議するには #wai-aria チャンネル (irc.w3.org:6665) に参加してください。メンバーは内部ドラフト案を #pf で審議してください。

公共の討議をするメーリングリストは wai-xtech です。wai-xtech に参加したい方は PFWG 議長 ([email protected]) に購読希望のメールを出してください。