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

by 2 contributors:

ARIA とは何か?

WAI-ARIA は、W3CWeb 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 ツールキットのアクセシビリティに関する詳細情報:

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);
}

検証はどうなりますか?

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 のテストを支援する、調査ツールやデバッグツールがいくつかあります:

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

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

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

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

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

ARIA についてより詳しく学ぶには?

ドキュメントのタグと貢献者

タグ: 
Contributors to this page: teoli, yyss
最終更新者: teoli,