From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/guide/ajax/community/index.html | 30 +++ files/ja/web/guide/ajax/getting_started/index.html | 275 +++++++++++++++++++++ files/ja/web/guide/ajax/index.html | 79 ++++++ files/ja/web/guide/ajax/other_resources/index.html | 21 ++ .../wai_aria_live_regions_api_support/index.html | 167 +++++++++++++ 5 files changed, 572 insertions(+) create mode 100644 files/ja/web/guide/ajax/community/index.html create mode 100644 files/ja/web/guide/ajax/getting_started/index.html create mode 100644 files/ja/web/guide/ajax/index.html create mode 100644 files/ja/web/guide/ajax/other_resources/index.html create mode 100644 files/ja/web/guide/ajax/wai_aria_live_regions_api_support/index.html (limited to 'files/ja/web/guide/ajax') diff --git a/files/ja/web/guide/ajax/community/index.html b/files/ja/web/guide/ajax/community/index.html new file mode 100644 index 0000000000..a6d6e744c3 --- /dev/null +++ b/files/ja/web/guide/ajax/community/index.html @@ -0,0 +1,30 @@ +--- +title: コミュニティ +slug: Web/Guide/AJAX/Community +tags: + - AJAX +translation_of: Web/Guide/AJAX/Community +--- +

AJAX に関する有用なメーリングリスト、ニュースグループ、フォーラム、その他のコミュニティを知っている場合は、リンクを追加してください。

+ +

英語コミュニティ

+ +

http://www.ajaxlines.com - a huge collection of AJAX resources and tutorials, toolkits, websites http://www.ajaxmatters.com - information portal about AJAX and related web technologies

+ +

Ajax ワークショップ & コース

+ + + +

日本語コミュニティ

+ + diff --git a/files/ja/web/guide/ajax/getting_started/index.html b/files/ja/web/guide/ajax/getting_started/index.html new file mode 100644 index 0000000000..755dff5424 --- /dev/null +++ b/files/ja/web/guide/ajax/getting_started/index.html @@ -0,0 +1,275 @@ +--- +title: 始めましょう +slug: Web/Guide/AJAX/Getting_Started +tags: + - AJAX + - API + - Advanced + - JavaScript + - WebMechanics + - XMLHttpRequest +translation_of: Web/Guide/AJAX/Getting_Started +--- +

この記事は AJAX の基礎の概観と、入門のための二つの実践的なサンプルを示します。

+ +

AJAX とは?

+ +

AJAX は Asynchronous JavaScript And XML の頭文字を取ったものです。これは一言で言えば、 XMLHttpRequest オブジェクトを使ってサーバーと通信することです。 AJAX は JSON, XML, HTML, テキストファイルなど、様々な形式の情報で送受信することができます。 AJAX の最も魅力的な特徴は「非同期」であること、つまり、サーバーとの通信、データの交換、ページの更新を、ページの再読み込みなしに行うことができる点です。

+ +

AJAX でできることには、二つの重要な特徴があります。

+ + + +

Step 1 –  HTTP リクエストの送り方

+ +

JavaScript からサーバーに HTTP リクエストを送るためには、この機能を提供するオブジェクトのインスタンスが必要になります。これが XMLHttpRequest の登場する場所です。このクラスは、もともとは Internet Explorer で XMLHTTP と呼ばれる ActiveX オブジェクトとして導入されたものです。その後、 Mozilla や Safari やその他のブラウザがこれに追随し、 Microsoft 独自の ActiveX オブジェクトのメソッドやプロパティに対応する XMLHttpRequest オブジェクトを実装しました。いっぽう、 Microsoft も同様に XMLHttpRequest を実装しました。

+ +
// 古い互換コードで、もう必要ありません。
+if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
+    httpRequest = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE 6 以前
+    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+}
+
+ +
メモ: 説明のために、このコードは実際に XMLHttp インスタンスを作成するのに使用するコードよりも多少簡単にしています。より実際に近いサンプルは、この記事の step 3 を見てください。
+ +

リクエストを送ったら、応答を受け取った後に何をするかを決めなければなりません。この段階で行う必要があるのは、どの JavaScript 関数に応答を処理させるかを XMLHttp リクエストオブジェクトに教えることだけです。これは、オブジェクトの onreadystatechange プロパティに、使おうとしている JavaScript 関数の名前をこのように設定することで行えます。

+ +
httpRequest.onreadystatechange = nameOfTheFunction;
+ +

このとき、関数名の後に括弧や引数がないことに注意してください。それは、実際にそれを呼ぶのではなく単純に関数の参照を渡しているからです。また、関数名を設定するのではなく、以下のように関数や応答を処理する動作をその場で定義するという JavaScript の機能 (「無名関数」と呼ばれる) を利用することもできます。

+ +
httpRequest.onreadystatechange = function(){
+    // ここでサーバーからの応答を処理します。
+};
+
+ +

次に、応答を受け取った後に何をするかを宣言したら、以下のように HTTP 要求オブジェクトの open() と send() 呼び出して、要求を作成する必要があります。

+ +
httpRequest.open('GET', 'http://www.example.org/some.file', true);
+httpRequest.send();
+
+ + + +

send() メソッドの引数は、要求を POST するときにサーバーに送信したい任意のデータです。フォームデータはサーバーが解釈できる形式、例えばクエリ文字列のような形式、

+ +
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
+ +

又は、 multipart/form-data, JSON, XML など形式にしてください。

+ +

なお、データを POST する場合、要求の MIME タイプを設定する必要がある場合があります。例えば、フォームデータをクエリ文字列として send() を呼び出して送る前に、次の文を使用してください。

+ +
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+ +

Step 2 – サーバー応答の扱い

+ +

要求を送った時に、応答を扱う JavaScript 関数の名前を設定しました。

+ +
httpRequest.onreadystatechange = nameOfTheFunction;
+
+ +

この関数では何を行うべきでしょうか。最初に、この関数ではリクエストの状態を調べる必要があります。ステータス値が XMLHttpRequest.DONE (4 に対応) であるなら、サーバーからの応答が完了しており、処理を進められることを意味します。

+ +
if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    // 全てが問題ない状態で、応答も返ってきています
+} else {
+    // まだ準備ができていません
+}
+
+ +

readyState の値のリストは XMLHTTPRequest.readyState で文書化されていて、以下のようになっています。

+ + + +

次に、 HTTP 応答の 応答コードを調べます。返ってくる可能性があるコードは W3C でリスト化されています。以下の例では、 AJAX 呼び出しが成功したか失敗したかを {{HTTPStatus("200", "200 OK")}} 応答コードをチェックすることで判別します。

+ +
if (httpRequest.status === 200) {
+    // 完璧です！
+} else {
+    // 何らかの問題が発生しています。
+    // たとえば、応答に 404 (Not Found) や
+    // 500 (Internal Server Error) 応答コードが返っているなど。
+}
+
+ +

要求の状態と応答の HTTP 状態コードをチェックした後、サーバーが送信したデータを使って好きなことが何でもできます。データにアクセスするには二つの選択肢があります。

+ + + +

なお、上記の段階は非同期要求を使用した場合 (open() の第三引数が未指定か true に設定されていた場合) のみ有効です。同期要求を使用した場合は関数を指定する必要はありませんが、これはユーザーの使い勝手をひどく損なうので、避けるべきです。

+ +

Step 3 –  簡単な例

+ +

さて、ここまでに紹介した方法を使って簡単な HTTP リクエストを実行してみましょう。われわれの JavaScript では test.html という名前の、 "これはテストです" と書かれた HTML 文書を要求し、その内容を alert() で表示します。注意として、この例では vanilla JavaScript を使っています — jQuery は入っていません。また HTML, XML, PHP ファイルは同一ディレクトリに置かれています。

+ +
<button id="ajaxButton" type="button">要求を実行</button>
+
+<script>
+(function() {
+  var httpRequest;
+  document.getElementById("ajaxButton").addEventListener('click', makeRequest);
+
+  function makeRequest() {
+    httpRequest = new XMLHttpRequest();
+
+    if (!httpRequest) {
+      alert('中断 :( XMLHTTP インスタンスを生成できませんでした');
+      return false;
+    }
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('GET', 'test.html');
+    httpRequest.send();
+  }
+
+  function alertContents() {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('リクエストに問題が発生しました');
+      }
+    }
+  }
+})();
+</script>
+
+ +

このサンプルでは以下のことを行います。

+ + + +
メモ: 要求を送信する先が静的な HTML ファイルではなく、 XML を返すコードである場合、 Internet Explorer に応答ヘッダーを設定しなければなりません。Content-Type: application/xml というヘッダーを設定しなければ、XML 要素にアクセスしようとしている行で IE が "Object Expected" という Javascript エラーを投げるでしょう。
+ +
メモ 2: Cache-Control: no-cache というヘッダーを設定しなければ、ブラウザーが応答をキャッシュして要求を再送信しなくなるため、デバッグが難しくなるでしょう。 GET 引数に、タイムスタンプやランダムな数字のような、常に異なるものを追加する方法もあります (キャッシュをバイパスするをご覧ください)
+ +
メモ 3: httpRequest 変数をグローバルに使用すると、関数の呼び出しが競合して makeRequest() が互いに上書きし合うため、競合状態が発生します。 httpRequest 変数を、 AJAX 関数を含んでいるクロージャのローカルで宣言することでこれを防ぐことができます。
+ +

通信エラーのイベント (サーバーがダウンしたなど) では、応答状態にアクセスする時に onreadystatechange メソッドの中で例外が発生します。この問題を防ぐため、 if...then 文は必ず try...catch で囲むようにしてください。

+ +
function alertContents() {
+  try {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('リクエストに問題が発生しました');
+      }
+    }
+  }
+  catch( e ) {
+    alert('例外を捕捉: ' + e.description);
+  }
+}
+
+ +

Step 4 – 「X-ファイル」 もしくは XML レスポンスの扱い方

+ +

前の例では、 HTTP リクエストへの応答を受け取った後、要求オブジェクトの responseText プロパティを用いて、それに含まれている test.html の中身を取得しました。では、次に responseXML プロパティのほうを試してみましょう。

+ +

はじめに、あとでサーバーに要求する妥当な XML 文書を作成します。 test.xml ファイルの中身は以下のようなものです。

+ +
<?xml version="1.0" ?>
+<root>
+    I'm a test.
+</root>
+
+ +

スクリプトでは、リクエスト送出を以下のように変更します。

+ +
...
+onclick="makeRequest('test.xml')">
+...
+
+ +

そして、 alertContents() では、 alert(httpRequest.responseText); としている行を以下のように変更します。

+ +
var xmldoc = httpRequest.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+
+ +

このコードでは、 responseXML から XMLDocument オブジェクトを取得し、 DOM メソッドを利用して XML 文書に含まれるデータにアクセスしています。 このtest.xml ファイルはここで、変更されたスクリプトはここで見ることができます。

+ +

Step 5 – データを処理する

+ +

最後に、データをサーバーに送って応答を受けましょう。 JavaScript はここで動的なページ test.php に要求し、このページは送ったデータを受けて「計算した」文字 - "Hello, [user data]!" - を返し、これを alert() します。

+ +

まずは HTML にテキストボックスを追加してユーザーが名前を入れられるようにします:

+ +
<label>Your name:
+  <input type="text" id="ajaxTextbox" />
+</label>
+<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
+  Make a request
+</span>
+ +

イベントハンドラーに、テキストボックスからユーザーデータを取得してサーバーサイドスクリプトの URL と一緒に makeRequest() に送るような行も追加します。

+ +
  document.getElementById("ajaxButton").onclick = function() {
+      var userName = document.getElementById("ajaxTextbox").value;
+      makeRequest('test.php',userName);
+  };
+
+ +

makeRequest() を編集してユーザーデータを受け取ってサーバーに渡すようにします。リクエストメソッドは GET から POST に変更し、データを httpRequest.send() 呼び出しのパラメーターとして入れます:

+ +
  function makeRequest(url, userName) {
+
+    ...
+
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('POST', url);
+    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    httpRequest.send('userName=' + encodeURIComponent(userName));
+  }
+
+ +

alertContents() 関数はステップ 3 と同じように書かれて、サーバーが計算された文字列を返していたら、 alert するようにします。しかし、サーバーが計算された文字列とオリジナルのユーザーデータの両方を返していたらどうでしょう？ユーザーがテキストボックスに "Jane" とタイプしていたら、サーバーの応答はこのようになります:

+ +

{"userData":"Jane","computedString":"Hi, Jane!"}

+ +

このデータを alertContents(),内で使うには、単に responseText をalert することはできず、これを parse して、求めるプロパティの computedString をalertします:

+ +
function alertContents() {
+  if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    if (httpRequest.status === 200) {
+      var response = JSON.parse(httpRequest.responseText);
+      alert(response.computedString);
+    } else {
+      alert('There was a problem with the request.');
+    }
+  }
+}
+ +

test.php には以下のようなものが入ります。

+ +
$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name';
+$computedString = "Hi, " . $name;
+$array = ['userName' => $name, 'computedString' => $computedString];
+echo json_encode($array);
+ +

DOM メソッドについてより詳しくは、Mozilla での DOM の実装の文書を参照してください。

diff --git a/files/ja/web/guide/ajax/index.html b/files/ja/web/guide/ajax/index.html new file mode 100644 index 0000000000..c28166501d --- /dev/null +++ b/files/ja/web/guide/ajax/index.html @@ -0,0 +1,79 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +tags: + - AJAX + - DOM + - JavaScript + - References + - XML + - XMLHttpRequest +translation_of: Web/Guide/AJAX +--- +
はじめに
+AJAX 入門
+ +
+

Asynchronous JavaScript and XML (AJAX) はそれ自体がある種の技術というわけではありませんが、 Jesse James Garrett によって 2005 年に作られた言葉で、既存の技術同士を組み合わせた新しいアプローチを意味します。組み合わされる技術は、HTML, XHTML, CSS, JavaScript, DOM, XML, XSLT, そして最も重要なものは {{domxref("XMLHttpRequest")}} オブジェクトです。
+ これらの技術が AJAX のモデルで組み合わされると、ウェブアプリケーションはより早く、表示されているページ全てを再読み込みすることなく、ユーザーインターフェイスを逐次更新できるようになります。そして、アプリケーションにより早い表示、より良い応答性をもたらします。

+ +

Ajax の X は XML を表していますが、 {{glossary("JSON")}} の方がより軽く JavaScript の一部であることなど数多くの利点があるため、今日では XML よりもよく使われています。 JSON と XML はどちらも Ajax モデルの情報をパッケージ化するために使用されます。

+
+ +
+
+

ドキュメント

+ +
+
はじめに
+
この記事では AJAX の基本について説明し、始めるために2つの簡単な実例を紹介します。
+
XMLHttpRequest API の使用
+
{{domxref("XMLHttpRequest")}} API は、Ajax のコアです。この記事では、次のような Ajax 技術の使用方法について説明します。 + +
+
Fetch API
+
Fetch API はリソースをフェッチするためのインターフェイスを提供します。 {{domxref("XMLHTTPRequest")}} を使用した人なら誰にでも馴染みのあるように見えますが、この API はより強力で柔軟な機能セットを提供します。
+
Server-sent イベント
+
伝統的に、ウェブページは新しいデータを受信するためにサーバにリクエストを送信しなければなりません。つまり、ページはサーバにデータを要求します。サーバが送信したイベントでは、サーバがメッセージをウェブページにプッシュすることで、いつでもウェブページに新しいデータを送信することができます。これらの着信メッセージは、ウェブページ内のイベント+データとして扱うことができます。サーバー送信イベントの使用を参照してください。
+
純粋な Ajax ナビゲーションサンプル
+
この記事では、純粋な Ajax ウェブサイトの3つのページから構成された実用的な (最小限の) 例を提供します。
+
バイナリデータの送信と受信
+
XMLHttpRequest オブジェクトの responseType プロパティを設定して、予想されるレスポンスタイプをサーバから変更することができます。可能な値は空文字列 (デフォルト), arraybuffer, blob, document, json, text です。response のプロパティには、 responseType に従って ArrayBuffer, Blob, Document, JSON、または string のようなエンティティ本文が含まれます。この記事では、Ajax の I/O 技術をいくつか紹介します。
+
XML
+
Extensible Markup Language (XML) は、特定の目的のマークアップ言語を作成する W3C 推奨の汎用マークアップ言語です。これは SGML の単純化されたサブセットであり、多くの異なる種類のデータを記述することができます。その主な目的は、異なるシステム、特にインターネットを介して接続されたシステム間でのデータの共有を容易にすることです。
+
XML の解釈とシリアライズ
+
文字列、ファイル、または JavaScript を使用して XML 文書を解釈する方法、XML 文書を文字列、Javascript Object Tree (JXON) またはファイルにシリアル化する方法
+
XPath
+
XPath は XML Path Language (XML パス言語) の略で、XML 文書のさまざまな部分をアドレス指定する (指す) 柔軟な方法を提供する非 XML 構文を使用します。これと同様に、ドキュメント内のアドレス指定されたノードをテストしてパターンに一致するかどうかを判断することもできます。
+
{{domxref("FileReader")}} API
+
FileReader API を使用すると、ウェブアプリケーションがユーザーのコンピューターに格納されているファイル (または生データバッファ) の内容を非同期に読み取ることができ、読み取るファイルまたはデータを {{domxref("File")}} または {{domxref("Blob")}} オブジェクトで特定します。 File オブジェクトはユーザーが {{HTMLElement("input")}} 要素を使用して選択した結果として返される {{domxref("FileList")}} オブジェクト、ドラッグ＆ドロップ操作の {{domxref("DataTransfer")}} オブジェクト、 {{domxref("HTMLCanvasElement")}} の mozGetAsFile() API から取得することができます。
+
XMLHttpRequest における HTML
+
W3C の XMLHttpRequest 仕様書では、もともと XML の解析のみに対応していた {{domxref("XMLHttpRequest")}} に HTML 解析の対応が追加されています。この機能を使用すると、ウェブアプリケーションは XMLHttpRequest を使用して解析された DOM として HTML リソースを取得できます。
+
+ +

すべてを見る...

+
+ +
+

ツール

+ +
+
axios
+
{{jsxref("Promise")}} ベースの {{glossary("HTTP")}} クライアントで、内部的に XMLHttpRequest を使用しています。
+
+ +

関連情報

+ +
+
Ajax: ウェブアプリケーションへの新しいアプローチ
+
Adaptive Path の Jesse James Garrett は 2005年 2月にこの記事を書いて、 Ajax とその関連概念を紹介しました。
+
XMLHttpRequest の仕様書
+
WHATWG ライブ標準
+
+
+
diff --git a/files/ja/web/guide/ajax/other_resources/index.html b/files/ja/web/guide/ajax/other_resources/index.html new file mode 100644 index 0000000000..1475956d30 --- /dev/null +++ b/files/ja/web/guide/ajax/other_resources/index.html @@ -0,0 +1,21 @@ +--- +title: AJAX に関するその他の資料 +slug: Web/Guide/AJAX/Other_Resources +tags: + - AJAX +translation_of: Web/Guide/AJAX/Other_Resources +--- + diff --git a/files/ja/web/guide/ajax/wai_aria_live_regions_api_support/index.html b/files/ja/web/guide/ajax/wai_aria_live_regions_api_support/index.html new file mode 100644 index 0000000000..fb3a9d6a63 --- /dev/null +++ b/files/ja/web/guide/ajax/wai_aria_live_regions_api_support/index.html @@ -0,0 +1,167 @@ +--- +title: WAI ARIA Live Regions/API サポート +slug: Web/Guide/AJAX/WAI_ARIA_Live_Regions_API_Support +tags: + - AJAX + - アクセシビリティ +translation_of: Web/Guide/AJAX/WAI_ARIA_Live_Regions_API_Support +--- +

{{ Fx_minversion_header(3) }}

+ +
これらの注釈は、スクリーンリーダーの開発者向けです。 開発者は、ARIAライブリージョン開発者のドキュメントを使用する必要があります。
+ +

Firefox 3には、Mozillaエンジンがドキュメントのライブ変更を公開する方法に対する重要な改善が含まれています。
+
+ これらの機能は、ARIAライブリージョンマークアップでマークアップされたページと、追加のマークアップを追加しなかったページの両方で、スクリーンリーダー開発者がライブリージョンサポートの品質とパフォーマンスを向上させるのに役立ちます。

+ +

ARIA のライブリージョンのマークアップについては、ARIA の仕様またはライブリージョンのレポートをお読みください。

+ +

いつものように、私たちはコミュニティフォーラムの変更に関する質問や提案には門を開いています。

+ +

Web ページの突然変異のために発生したイベント

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
文書では何が変わったのですか？ATK/AT-SPI eventIAccessible2 event
Object about to be hidden or removedchildren_changed::remove (fired on the parent, with event data pointing to the child index of the accessible object to be removed)EVENT_OBJECT_HIDE* (fired on the actual accessible object about to go away)
Object shown or insertedchildren_changed::add (fired on the parent, with event data pointing to the child index of the inserted accessible object)EVENT_OBJECT_SHOW* (fired on the actual new accessible object)
Object replaced with different object (this happens especially if an object's interfaces or role changes)children_changed::remove followed immediately by children_change::addEVENT_OBJECT_HIDE followed immediately by EVENT_OBJECT_SHOW
Text removedtext_changed::deleteIA2_EVENT_TEXT_REMOVED (use IAccessibleText::get_oldText to retrieve the offsets and removed text)
Text insertedtext_changed::insertIA2_EVENT_TEXT_INSERTED (use IAccessibleText::get_newText to retrieve the offsets and inserted text)
Text replacedtext_changed::delete followed immediately by text_changed::insertIA2_EVENT_TEXT_REMOVED followed immediately by IA2_EVENT_TEXT_INSERTED
+ +

* We do not use MSAA's CREATE/DESTROY at the request of screen reader vendors, who avoid those events because they cause crashes on some important system -- SHOW/HIDE are the equivalent of those events.

+ +

イベントからオーサリング提供の ARIA ライブリージョンセマンティクスを取得する

+ +

ある祖先要素 (最も近い祖先の勝利) に定義されている場合、ページ内の任意の変更イベントに対して、作成者はイベントオブジェクトから以下のオブジェクト属性を取得できます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Object attribute namePossible valuesDefault value if not specifiedMeaningARIA markup if required
container-live"off" | "polite" | "assertive""off"Interruption policyaria-live on ancestor element
container-relevant"{{ mediawiki.external('additions') }} {{ mediawiki.external('removals') }} {{ mediawiki.external('text') }}" | "all""additions text"What types of mutations are possibly relevant? See {{ mediawiki.external('#Events_fired_for_web_page_mutations the mutation events list') }} to match the type of event with this attribute's value, to determine whether the author believed the event should be presented to the user or not.aria-relevant on ancestor element
container-busy"true" | "false" | "error""false"The current changes are not yet complete. A state change event for the A11y API's BUSY state will be fired on the container object currently marked as BUSY, once it is no longer BUSY. This is especially important in atomic regions. The entire atomic region should be presented once when it is finally no longer BUSY.aria-busy on ancestor element
container-atomic"true" | "false""false"Is this change inside a region that should always be presented at once. If yes, member-of relation will point to the root of the region (see next section)aria-atomic on ancestor element
member-ofIf container-atomic=true, points to an ancestor accessible object (thus it is actually an accessible relation, not object attribute)Not in atomic region if not providedPoints to the root of the atomic container that this object is in. This will always be an ancestor of the current object.aria-atomic on ancestor element
event-from-input"true" | "false"
+ (described more below)		Browser could not calculate thisWas the root cause of this event explicit user input?Does not require author's cooperation.
+ +

The "container-" prefix is so named because the attribute describes what the final computed property of similar name is for that node. This means that the AT does not need to traverse up the parent chain to get this information. At this time, for properties where the container-{{ mediawiki.external('name') }} attribute has not been set, the AT must have code to fall back on the default value as defined in the W3C spec.

+ +

イベントがユーザーの入力であったかどうかを判断する

+ +

All events will now provide information about whether the event was caused by user input, or was something that the web page caused. This information is retrieved differently on each platform, because some platforms use asynchronous events.

+ +

In IAccessible2, this is retrieved from the object attribute "event-from-input", which will be set to "true" or "false". If it is not present, then something went wrong and Mozilla was not able to provide this information. This information is available only for EVENT_SHOW, EVENT_HIDE, IA2_EVENT_TEXT_INSERTED and IA2_EVENT_TEXT_REMOVED.

+ +

For ATK/AT-SPI, this information is retrieved by checking the event name. If the event name has ":system" appended to it, then it is /not/ from user input. The ":system" string is calculated for children-changed and text-changed events.

+ +

Why is this useful? The majority of AJAX pages do not provide live region markup, but still need to be as usable as possible. It is difficult for a screen reader to decide when to interrupt a user with changes on a page. If the screen reader automatically reads too much, then the web page will be too annoying to use. If the screen reader doesn't read anything, then the user may miss important information.

+ +

It is believed this information will be useful for heuristics. Often, changes in a page that are directly caused by a user's keystrokes should be read. They are synchronous with what the user is doing and can thus likely be read without disorienting the user. Once the user presses the next key the speech will move on to echoing that key anyway. The screen reader may wish to take other factors into account, such as the type of change, the size of the change, where the change occured, etc. This is a potential area for innovation in screen readers.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Most recent occuranceUser input?
Key pressesYes
Mouse clicksYes
Mouse hoversNo
Page load eventsNo
+ +

Everything else, including focus changes, timer callbacks, XMLHttpRequest callbacks, etc. are neutral. They are only counted as user input if the original reason they happened was because of user input.

+ +

スクリーンリーダーが何を提示すべきか？

+ +

Please read the live region section of the WAI-ARIA Screen Reader Implementor's Guide.

-- cgit v1.2.3-54-g00ecf