Web アプリケーションと ARIA の FAQ

ARIA とは何か?

WAI-ARIA は、W3C の Web Accessibility Initiative による、アクセシブルなリッチインターネットアプリケーション (Accessible Rich Internet Applications) の仕様です。ARIA は Web アプリケーションやウィジェットを、スクリーンリーダーや拡大鏡といった支援技術を使用するユーザを含む幅広いユーザに対してアクセシブルにする手段を提供します。

ARIA はメニュー、スライダー、ツリー、ダイアログといった多くの一般的なユーザインターフェイスの役割、状態、機能性を示す付加的な意味を与えます。また作者がページ上の目印、部分、グリッドを設定することを支援する、付加的な構造情報も与えます。ARIA は動的で JavaScript 駆動のアプリケーションやウィジェットを、さまざまなデスクトップベースの支援技術と対話可能にします。

ARIA でアクセシブルなウィジェットを作成する方法について詳しくは、アクセシブルな Web アプリケーションやウィジェットの概要をご覧ください。

ARIA はどこでサポートされていますか?

ARIA は比較的新しい仕様ですが、サポートは進んでいます。多種多様なよく使用されるブラウザ、支援技術、JavaScript ツールキットやアプリケーションが ARIAをサポートしています。しかし、多くのユーザはいまだにこれらの古いバージョンを使用しているでしょう。古いブラウザや支援技術を良好にサポートするために、先進的な拡張方法 (例えばマークアップに直接ではなく JavaScript を使用して ARIA を追加する) を使用して ARIA を実装したいと考えるでしょう。

ブラウザ

ARIA は以下のブラウザでサポートされています:

ブラウザ	最低バージョン	備考
Firefox	3.0 以降	NVDA、JAWS 10 以降、Orca で動作
Chrome	最新	Chrome 15 現在、スクリーンリーダーは試験にサポート
Safari	4 以降	Safari 5 のサポートはとても向上しています。 Live region のサポートは、iOS5 または OS X Lion の VoiceOver と Safari 5 が必要です。
Opera	9.5 以降	OS X では VoiceOver が必要です。TBD: 現在の状況はどうでしょうか?
Internet Explorer	8 以降	JAWS 10 以降や NVDA で動作します。NVDA では live region をサポートしません。 IE9 のサポートはとても向上しています。

以前のバージョンでは ARIA の一部の機能しかサポートしない場合があります。より詳しいブラウザ実装状況の表を、複数の情報源から得られます:

支援技術

支援技術は ARIA を順次採用しています。それらが搭載しているものは:

支援技術	基本的な ARIA の最低バージョン	live region および alert サポートの最低バージョン
NVDA	2010.2 (NVDA のアップグレードは常に無償です)	Firefox 向けは 2011.1 でサポートしました。2011.2 の時点で IE の live region サポートはありません。
Orca	? (TBD)	? (TBD)
VoiceOver	OSX 10.5, iOS 4	OS X 10.7 iOS 5
JAWS	8	10
Window-Eyes	7	現在 live region はサポートしていません。
ZoomText	?	現在 live region はサポートしていません。

注記: これらツールの過去のバージョンは、ARIA の実装が部分的あるいはバグがある場合があります。

JAWS 10 時点の、JAWS の ARIA サポートに関する注記については、Paciello Group による記事をご覧ください: JAWS Support for ARIA。

JavaScript ツールキット

ARIA のロール、ステート、プロパティは、以下のような多くのポピュラーな JavaScript ユーザインターフェイスツールキットに追加されています:

Dojo/Dijit
jQuery UI
Fluid Infusion
Google Closure
Google Web Toolkit
BBC Glow
Yahoo!User Interface Library (YUI)

JavaScript ツールキットのアクセシビリティに関する詳細情報:

Steve Faulkner 氏による WAI-ARIA Implementation in JavaScript UI Libraries

ARIA の実例を見せていただけますか?

はい。こちらがプログレスバーのウィジェットのマークアップです:

<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" />

このプログレスバーは <div> を使用して作られており、あまり説明的ではありません。残念ながら HTML 4 で開発者が使用できる、より意味があるタグはありませんので、ARIA のロールやプロパティを含めることが必要です。これらは、要素に属性を追加することによって指定します。この例では role="progressbar" 属性で、要素が実際は JavaScript で動作するプログレスバーウィジェットであることをブラウザに伝えます。aria-valuemin 属性や aria-valuemax 属性はプログレスバーの最小値と最大値を、aria-valuenow 属性は現在の状態を示します。

ARIA の属性はマークアップ内に直接置くほかに、以下のような JavaScript コードを使用して要素へ追加および動的な更新を行うこともできます:

// DOM でプログレスバーである <div> を探します。
var progressBar = document.getElementById("percent-loaded");

// どのようなウィジェットであるかを支援技術がわかるように、ARIA のロールやステートを設定します。
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);

// プログレスバーの値を更新するたびに呼び出すことが可能な関数を作成します。
function updateProgress(percentComplete) {
  progressBar.setAttribute("aria-valuenow", percentComplete);
}

ARIA を追加するとページのスタイルや動作が変わりますか?

いいえ。ARIA は支援技術の API を使用可能にするだけであり、DOM やスタイルに関するブラウザのネイティブ機能には影響を与えません。ブラウザから見ると、ネイティブな HTML は要素のセマンティックな意味や動作を定義するものであり、ARIA の属性は AT API のサポートを支援するレイヤーとして機能します。ARIA の属性は他の HTML 属性と同様にスタイルを変更しませんが、CSS は要素のセレクタとして ARIA の属性を活用できます。これは、ARIA が有効なウィジェットにスタイルを設定するうえで便利な仕組みです。

.tab-panel[aria-hidden="true"] {
  display: none;
  }
  
.tab-panel[aria-hidden="false"] {
  display: block;
  }

検証はどうなりますか?

role 属性や aria- 接頭辞がついた属性のような、ARIA で導入された新たな属性は、HTML 4 や XHTML 4 の正式な一部分ではありません。その結果、ARIA を含むページは W3C の Markup Validator のようなツールで検証してはいけません。

第一にこの問題の解決策になり得ることは、ARIA のロールやステートをマークアップ内に直接置くのを避けることです。代わりに、前出の ARIA の実例を見せていただけますか? への回答で示したように、JavaScript を使用してページへ動的に ARIA を追加してください。それでも理論上、ページは妥当ではありませんが、すべての静的な検証は正しく合格するでしょう。

別の代案は HTML5 の doctype を使用することで、これは ARIA のサポートが組み込まれています。W3C の HTML5 validator は、あなたの HTML5 ページにおける ARIA の誤った使い方も発見するでしょう。

HTML5 と ARIA との関係は?

HTML5 では、役に立つ多くのセマンティックなタグを HTML に導入しました。新たな <progress> 要素のようにいくつかのタグは、ARIA で使用可能なロールと正に重複します。ARIA にも存在する HTML5 タグをブラウザがサポートする場合は、通常その要素に ARIA のロールやステートも追加する必要はありません。ARIA には HTML5 で使用できない多くのロール、ステート、プロパティが含まれており、それらは HTML5 を使用する開発者にとって引き続き有用でしょう。詳細情報として、Steve Faulkner 氏が HTML5 と ARIA の関係について良い概説を記述しました。

HTML5 から ARIA への円滑な退行

HTML5 を理解しないブラウザにコンテンツを提供するときに、必要なところで ARIA の使用へ円滑に退行したいと考えるでしょう。よってプログレスバーの例で言うと、<progressbar> タグがサポートされていない場合は role="progressbar" へ円滑に退行できます。

こちらが、HTML5 のプログレスバーを使用するマークアップの例です:

<!DOCTYPE html>
<html>
  <head><title>Gracefully degrading progress bar</title></head>
  <body>
    <progress id="progress-bar" value="0" max="100">0% complete</progress>
    <button id="update-button">Update</button>
 </body>
</html>

そして、こちらが古いブラウザでもプログレスバーが動作するようにする JavaScript コードです:

var progressBar = document.getElementById("progress-bar");
      
// ブラウザが HTML5 の <progress> タグをサポートするかを確認します。
var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined");

function setupProgress() {
  if (!supportsHTML5Progress) {
    // HTML5 の <progress> がブラウザでサポートされていないので、
    // ARIA のロールやステートを要素に追加します。
    progressBar.setAttribute("role", "progressbar");
    progressBar.setAttribute("aria-valuemin", 0);
    progressBar.setAttribute("aria-valuemax", 100);
  }
}

function updateProgress(percentComplete) {
  if (!supportsHTML5Progress) {
    // HTML5 の <progress> がブラウザでサポートされていないので、 
    // aria-valuenow 属性の更新が必要です。
    progressBar.setAttribute("aria-valuenow", percentComplete);
  } else {
    // HTML5 の <progress> がサポートされているので、代わりに value 属性を更新します。
    progressBar.setAttribute("value", percentComplete);
  }

  progressBar.textContent = percentComplete + "% complete";
}

function initDemo() {
  setupProgress(); // プログレスバーの設定。     

  // click ハンドラをボタンに割り当てます。これはプログレスバーを 75% に更新します。
  document.getElementById("update-button").addEventListener("click", function (e) {
    updateProgress(75);
    e.preventDefault();
  }, false);
}
initDemo();

支援技術はどのように動作しますか?

支援技術は、アプリケーションのユーザインターフェイスのロール、ステート、構造を表すよう特に設計された、各オペレーティングシステムに組み込まれた API を使用します。例えば、スクリーンリーダーはテキスト読み上げエンジンでユーザインターフェイスを読むために、拡大鏡はスクリーンで重要またはアクティブな領域を強調するために、オンスクリーンキーボードはそのときの状況や UI コントロールに対してもっとも効率的なキーボードレイアウトを提供するために、この API を使用します。さらに支援技術はたいてい、ページのセマンティクスや属性を理解するために、この API を通してページの DOM にアクセスします。

ARIA は DOM の世界とデスクトップの世界との間を橋渡しします。ブラウザは ARIA が有効な要素を、ネイティブなウィジェットであるかのように支援技術の API に公開します。その結果ユーザは潜在的により一貫したユーザ体験を得て、そこでは Web の動的な JavaScript で動作するウィジェットが、デスクトップで同等のウィジェットに匹敵します。

私の ARIA の使い方の確認方法は? 自由に使用できるツールはありますか?

動作中の ARIA のテストを支援する、調査ツールやデバッグツールがいくつかあります:

Windows で Object Inspector
OS X で Accessibility Inspector
Linux で AccProbe
Firebug の DOM Inspector
Accessibility Inspector for Firebug

ARIA の実践的なテストに使用できる、フリーまたはオープンソースのスクリーンリーダーもいくつかあります。以下のようなものです:

Linux 向けの Orca
Windows 向けの NVDA
OS X 内蔵の VoiceOver

スクリーンリーダーでテストを行うときは、2 つのポイントを覚えておいてください:

スクリーンリーダーのユーザとの軽いテストでは、実際のユーザのフィードバック、テスト、および支援の代替にはなりません。
スクリーンリーダーのサポートだけがアクセシビリティではありません。さまざまなユーザビリティやアクセシビリティの手法を試しましょう。

ARIA が有効なアプリケーションやウィジェット向けの、その他の有用なテストツールや手法です:

Yahoo!'s ARIA bookmarklets
Fluid Project の simple accessibility evaluation techniques

ARIA の議論はどこで行われていますか?

Wai-xtech mailing list -- ARIA 仕様の議論を保持しています。
Free-ARIA google group -- フリーなツールやリソースの開発者およびユーザ向けです。