diff --git a/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html deleted file mode 100644 index 7eacb51e5f4b8f..00000000000000 --- a/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: アクセシブルな Web アプリケーションやウィジェットの概要 -slug: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets -tags: - - ARIA - - Accessibility - - Guide - - Web apps - - Widget -translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets ---- -

Web は変化しています。静的でページに基づくサイトは、次第に動的でデスクトップスタイルの、JavaScript や AJAX を多用する Web アプリケーションに置き換えられています。デザイナーは JavaScript、HTML、CSS を組み合わせて、驚くような新しいウィジェットやコントロールのすべてを作り上げています。この変化は Web の応答性やユーザビリティを劇的に向上させる可能性を秘めていますが、多くのユーザはアクセシビリティのギャップにより閉め出されてしまう恐れがあります。JavaScript は伝統的に、スクリーンリーダーなどの支援技術のユーザに対してアクセシブルではないと言われてきましたが、現在はさまざまなユーザに対してアクセシブルな動的 Web ユーザインターフェイスを作成するための手段があります。

- -

問題点

- -

ほとんどの JavaScript ツールキットは、よく知られたデスクトップインターフェイスの動作を模倣する、クライアントサイドのウィジェットのライブラリを提供します。スライダー、メニューバー、ファイルリストビューなどを JavaScript、CSS、HTML の組み合わせにより構築できます。HTML 4 の仕様はこれらの種類のウィジェットを意味的に表すタグを内蔵していないため、一般的に開発者は <div> や <span> といった汎用の要素を使用します。これはデスクトップによく似たもののように見えますが、支援技術が使用するのに値する意味的な情報は、たいていマークアップ内にありません。Web ページ上の動的コンテンツは、どのような理由であれ画面を見ることができないユーザにとって特に問題になる可能性があります。株価表示、Twitter のフィード更新、進捗の表示やそれらに似たコンテンツは、支援技術 (AT) が認識できないかもしれない方法で DOM を変更します。ここが、ARIA が必要になるところです。

- -

例 1: ARIA でラベルをつけずに作成したタブウィジェットのマークアップ。ウィジェットの外観や機能を示す情報は、マークアップ内にありません。

- -
<!-- これはタブウィジェットです。マークアップだけを見て、どのようにしてわかるのでしょうか?-->
-<ol>
-  <li id="ch1Tab">
-    <a href="#ch1Panel">Chapter 1</a>
-  </li>
-  <li id="ch2Tab">
-    <a href="#ch2Panel">Chapter 2</a>
-  </li>
-  <li id="quizTab">
-    <a href="#quizPanel">Quiz</a>
-  </li>
-</ol>
-
-<div>
-  <div id="ch1Panel">Chapter 1 content goes here</div>
-  <div id="ch2Panel">Chapter 2 content goes here</div>
-  <div id="quizPanel">Quiz content goes here</div>
-</div>
- -

例 2: タブウィジェットはどのようにして視覚的にスタイルが設定されるのでしょうか。ユーザはそれを視覚的に認識するでしょう。しかし、支援技術向けに機械が読み取れる意味の情報はありません。
- Screenshot of the tabs widget

- -

ARIA

- -

W3C の Web Accessibility Initiative から生まれた WAI-ARIA こと Accessible Rich Internet Applications 仕様は、スクリーンリーダーのような支援技術が必要とする、欠けているセマンティクスを追加する手段です。ARIA はマークアップに特別な属性を追加することで、開発者が自身のウィジェットをより詳しく説明することを可能にします。ARIA は動的な Web アプリケーションにおいて、標準の HTML タグとデスクトップスタイルのコントロールとの間にあるギャップを埋めるように設計されており、ほとんどのよく知られた UI ウィジェットの動作を示す役割や状態を与えます。

- -

ARIA 仕様書は 3 種類の属性に分けられています: ロール、ステート、プロパティです。ロールは HTML 4 において他の方法で利用できないウィジェット、例えばスライダー、メニューバー、タブ、ダイアログなどを説明します。プロパティはこれらのウィジェットの特徴、例えばドラッグ可能、必須の要素がある、関連づけられたポップアップがあるなどを説明します。ステートは要素について支援技術に伝える現在の対話状態、例えばビジー、無効、選択中、非可視などを説明します。

- -

ARIA の属性はブラウザによって自動的に解釈され、オペレーティングシステムのネイティブなアクセシビリティ API に変換されるように設計されています。ARIA が提供されていると、支援技術は独自の JavaScript コントロールについて、デスクトップにおける同等物と同じ方法で、認識および対話ができます。支援技術のユーザが Web ベースのアプリケーションを使用するときに、デスクトップアプリケーションの動作に関するあらゆる知識を適用できますので、以前の Web アプリケーションより一貫したユーザエクスペリエンスをもたらす可能性を秘めています。

- -

例 3: ARIA の属性を追加したタブウィジェットのマークアップ。

- -
<!-- *これら* はタブです!-->
-<!-- タブリストや各タブを表すために、role 属性を追加しました。-->
-<ol role="tablist">
-  <li id="ch1Tab" role="tab">
-    <a href="#ch1Panel">Chapter 1</a>
-  </li>
-  <li id="ch2Tab" role="tab">
-    <a href="#ch2Panel">Chapter 2</a>
-  </li>
-  <li id="quizTab" role="tab">
-    <a href="#quizPanel">Quiz</a>
-  </li>
-</ol>
-
-<div>
-  <!-- タブのパネルを表すために追加した role および aria-labelledby 属性に注目してください。-->
-  <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div>
-  <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div>
-  <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Quiz content goes here</div>
-</div>
-
- -

ARIA は Firefox、Safari、Opera、Chrome、Internet Explorer といった主要なブラウザの最新バージョンでサポートされています。オープンソースの NVDA や Orca スクリーンリーダーなど、多くの支援技術も ARIA をサポートしています。jQuery UI、YUI、Google Closure、Dojo Dijit などの JavaScript ウィジェットライブラリも、次第に ARIA のマークアップを導入しています。

- -

表現の変化

- -

動的な表現の変化には、コンテンツを表示させたり隠したりすることはもちろん、コンテンツの外見を変える (不正なデータを囲む赤色のボーダー、チェックされたチェックボックスの背景色を変えるなど) ために CSS を使用することも含みます。

- -

状態の変化

- -

ARIA に、UI ウィジェットの現在の状態を定義する属性があります。例えば以下のとおりです (これだけではありません):

- - - -

(ARIA のすべてのステートの一覧については、ARIA のステートとプロパティの一覧をご覧ください。)

- -

開発者は UI ウィジェット要素の状態を示すために ARIA のステートを使用して、ステートの変化に基づく視覚的外見の変更に (スクリプトを使用して要素のクラス名を変更するのではなく) CSS の属性セレクタを使用しましょう。

- -

可視性の変化

- -

コンテンツの可視性を変えるとき (例えば要素を隠したり表示したりする)、開発者は aria-hidden プロパティの値を変更するとよいでしょう。先に説明した手法を、display:none を使用して要素を視覚的に隠すという CSS を示すために使用しましょう。

- -

これは、可視性の制御に aria-hidden を使用するツールチップの例です。この例では、入力フィールドに関する指示を収めたツールチップを持つシンプルな Web フォームの例を示しています。例の中で関係する部分を、以下で説明します。

- -

この例でツールチップ用の HTML は、例 2a で示す形式になっています。9 行目で aria-hidden を true に設定しています。

- -

例 2a: ツールチップ用の HTML

- -
<div class="text">
-    <label id="tp1-label" for="first">First Name:</label>
-    <input type="text" id="first" name="first" size="20"
-           aria-labelledby="tp1-label"
-           aria-describedby="tp1"
-           aria-required="false" />
-    <div id="tp1" class="tooltip"
-         role="tooltip"
-         aria-hidden="true">Your first name is a optional</div>
-</div>
-
- -

このマークアップ用の CSS を例 2b で示します。ここでは独自のクラス名を使用せず、1 行目で aria-hidden 属性の状態のみを使用していることに注意してください。

- -

例 2b: 状態を示すための、属性セレクタ

- -
div.tooltip[aria-hidden="true"] {
-  display: none;
-}
-
- -

>aria-hidden プロパティを更新するための JavaScript は、例 2c で示す形式になっています。このスクリプトは >aria-hidden 属性しか更新しないことに注意してください (2 行目)。独自のクラス名の追加や削除は不要です。

- -

例 2c: aria-hidden 属性を更新する JavaScript

- -
var showTip = function(el) {
-  el.setAttribute('aria-hidden', 'false');
-}
- -

ロールの変化

- -
作成中
- -

ARIA によって開発者は、誤った意味を持っていたり意味が存在しない要素に対して意味的なロールを宣言することができます。例えばメニューを作るために順番付けがないリストを使用するとき、{{HTMLElement("ul")}} に menubar の role を、各々の {{HTMLElement("li")}} に menuitem の role を与えるべきです。

- -

要素の role を変更するべきではありません。代わりに元の要素を削除して、新たな role の要素で置き換えてください。

- -

例えば "インライン編集" ウィジェットについて考えてみましょう: これはコンテキストを切り替えることなく、ユーザがその場でひとまとまりのテキストを編集できるコンポーネントです。このコンポーネントは、テキストの編集はできませんがアクティブが可能な "閲覧" モードと、テキストの編集が可能な "編集" モードがあります。開発者は、ARIA の role を button に設定した読み取り専用の text 型 {{HTMLElement("input")}} 要素で "閲覧" モードを実装して、要素を書き換え可能にするとともに "閲覧" モードの role 属性を削除する ({{HTMLElement("input")}} は自身のロールを意味として持っているため) ことで "編集" モードに切り替えようと考えるでしょう。

- -

これを行ってはいけません。代わりに role が button である {{HTMLElement("div")}} や {{HTMLElement("span")}} といった、まったく別の要素を使用して "閲覧" モードを、また text 型の {{HTMLElement("input")}} 要素を要して "編集" モードを実装してください。

- -

非同期のコンテンツ変更

- -
作成中です。Live Regions もご覧ください。
- -

キーボードナビゲーション

- -

開発者は、独自のウィジェットを作成する際にキーボードのサポートを見落とすことがよくあります。さまざまなユーザにとってアクセシブルにするために、すべての Web アプリケーションやウィジェットはマウスを必要とせずにキーボードでも操作できるようにするべきです。実際、通常これはデスクトップにおける同様のウィジェットがサポートする慣習への準拠度を向上させて、Tab、Enter、スペース、矢印キーのあらゆる利点を獲得します。

- -

伝統的に、Web におけるキーボードナビゲーションは Tab キーに限定されてきました。ユーザはページ内の各リンク、ボタン、フォームへ順番にフォーカスを当てるために Tab キーを、逆順に進むために Shift-Tab を押します。これは一次元、つまり一度に 1 つの要素で、進むまたは戻るナビゲーションです。かなり分量の多いページでは、キーボードのみ使用するユーザは必要なセクションへアクセスするまでに何度も Tab キーを押さなければなりません。Web においてデスクトップスタイルのキーボード操作の慣習を実装すると、多くのユーでナビゲーションが劇的に高速化する可能性があります。

- -

以下は、ARIA が有効な Web アプリケーションでどのようなキーボードナビゲーションが動作すべきかの概要です:

- - - -

従って前出のタブウィジェットの例では、ユーザが Tab および Shift+Tab キーを使用してウィジェットのコンテナ (マークアップにおける <ol>) に出入りするナビゲーションを行えるとよいでしょう。キーボードのフォーカスがコンテナ内に入ったら、矢印キーで各々のタブ (<li> 要素) を行き来できるとよいでしょう。ここからは、プラットフォームによって慣習が異なります。Windows では、ユーザが矢印キーを押すと自動的に次のタブがアクティブ化されます。Mac OS X では、ユーザは次のタブをアクティブ化するために Enter またはスペースキーを押します。キーボードでナビゲーション可能な JavaScript ウィジェット作成の包括的なチュートリアルで、このような動作を JavaScript で実装する方法を説明します。

- -

デスクトップスタイルのキーボードナビゲーションの慣習に関する詳細として、包括的な DHTML style guide があります。これは、ARIA がサポートする各種ウィジェットで動作すべきキーボードナビゲーションは何かの概要を示します。W3C でもさまざまなウィジェット向けのキーボードナビゲーションやショートカットの慣習を収めた、ARIA Best Practices の有用なドキュメントを提供しています。

- -

関連情報

- - diff --git a/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md b/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md new file mode 100644 index 00000000000000..069f2941a98f8d --- /dev/null +++ b/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md @@ -0,0 +1,178 @@ +--- +title: アクセシブルな Web アプリケーションやウィジェットの概要 +slug: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +tags: + - ARIA + - Accessibility + - Guide + - Web apps + - Widget +translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +--- +Web は変化しています。静的でページに基づくサイトは、次第に動的でデスクトップスタイルの、JavaScript や AJAX を多用する Web アプリケーションに置き換えられています。デザイナーは JavaScript、HTML、CSS を組み合わせて、驚くような新しいウィジェットやコントロールのすべてを作り上げています。この変化は Web の応答性やユーザビリティを劇的に向上させる可能性を秘めていますが、多くのユーザはアクセシビリティのギャップにより閉め出されてしまう恐れがあります。JavaScript は伝統的に、スクリーンリーダーなどの支援技術のユーザに対してアクセシブルではないと言われてきましたが、現在はさまざまなユーザに対してアクセシブルな動的 Web ユーザインターフェイスを作成するための手段があります。 + +## 問題点 + +ほとんどの JavaScript ツールキットは、よく知られたデスクトップインターフェイスの動作を模倣する、クライアントサイドのウィジェットのライブラリを提供します。スライダー、メニューバー、ファイルリストビューなどを JavaScript、CSS、HTML の組み合わせにより構築できます。HTML 4 の仕様はこれらの種類のウィジェットを意味的に表すタグを内蔵していないため、一般的に開発者は \
や \ といった汎用の要素を使用します。これはデスクトップによく似たもののように見えますが、支援技術が使用するのに値する意味的な情報は、たいていマークアップ内にありません。Web ページ上の動的コンテンツは、どのような理由であれ画面を見ることができないユーザにとって特に問題になる可能性があります。株価表示、Twitter のフィード更新、進捗の表示やそれらに似たコンテンツは、支援技術 (AT) が認識できないかもしれない方法で DOM を変更します。ここが、[ARIA](/ja/docs/ARIA "ARIA") が必要になるところです。 + +_例 1: ARIA でラベルをつけずに作成したタブウィジェットのマークアップ。ウィジェットの外観や機能を示す情報は、マークアップ内にありません。_ + +```html + +
    +
  1. + Chapter 1 +
    2. +
  2. + Chapter 2 +
    3. +
  3. + Quiz +
    4. +
+ +
+
Chapter 1 content goes here
+
Chapter 2 content goes here
+
Quiz content goes here
+
+``` + +_例 2: タブウィジェットはどのようにして視覚的にスタイルが設定されるのでしょうか。ユーザはそれを視覚的に認識するでしょう。しかし、支援技術向けに機械が読み取れる意味の情報はありません。_ +![Screenshot of the tabs widget](Tabs_Widget.png) + +## ARIA + +W3C の [Web Accessibility Initiative](http://www.w3.org/WAI/) から生まれた [WAI-ARIA](http://www.w3.org/WAI/intro/aria.php) こと **Accessible Rich Internet Applications** 仕様は、スクリーンリーダーのような支援技術が必要とする、欠けているセマンティクスを追加する手段です。ARIA はマークアップに特別な属性を追加することで、開発者が自身のウィジェットをより詳しく説明することを可能にします。ARIA は動的な Web アプリケーションにおいて、標準の HTML タグとデスクトップスタイルのコントロールとの間にあるギャップを埋めるように設計されており、ほとんどのよく知られた UI ウィジェットの動作を示す役割や状態を与えます。 + +ARIA 仕様書は 3 種類の属性に分けられています: ロール、ステート、プロパティです。ロールは HTML 4 において他の方法で利用できないウィジェット、例えばスライダー、メニューバー、タブ、ダイアログなどを説明します。プロパティはこれらのウィジェットの特徴、例えばドラッグ可能、必須の要素がある、関連づけられたポップアップがあるなどを説明します。ステートは要素について支援技術に伝える現在の対話状態、例えばビジー、無効、選択中、非可視などを説明します。 + +ARIA の属性はブラウザによって自動的に解釈され、オペレーティングシステムのネイティブなアクセシビリティ API に変換されるように設計されています。ARIA が提供されていると、支援技術は独自の JavaScript コントロールについて、デスクトップにおける同等物と同じ方法で、認識および対話ができます。支援技術のユーザが Web ベースのアプリケーションを使用するときに、デスクトップアプリケーションの動作に関するあらゆる知識を適用できますので、以前の Web アプリケーションより一貫したユーザエクスペリエンスをもたらす可能性を秘めています。 + +_例 3: ARIA の属性を追加したタブウィジェットのマークアップ。_ + +```html + + +
    + + + +
+ +
+ +
Chapter 1 content goes here
+
Chapter 2 content goes here
+
Quiz content goes here
+
+``` + +ARIA は Firefox、Safari、Opera、Chrome、Internet Explorer といった主要なブラウザの最新バージョンでサポートされています。オープンソースの NVDA や Orca スクリーンリーダーなど、多くの支援技術も ARIA をサポートしています。jQuery UI、YUI、Google Closure、Dojo Dijit などの JavaScript ウィジェットライブラリも、次第に ARIA のマークアップを導入しています。 + +### 表現の変化 + +動的な表現の変化には、コンテンツを表示させたり隠したりすることはもちろん、コンテンツの外見を変える (不正なデータを囲む赤色のボーダー、チェックされたチェックボックスの背景色を変えるなど) ために CSS を使用することも含みます。 + +#### 状態の変化 + +ARIA に、UI ウィジェットの現在の状態を定義する属性があります。例えば以下のとおりです (これだけではありません): + +- **`aria-checked`**: チェックボックスやラジオボタンの状態を示します。 +- **`aria-disabled`**: 要素は可視状態ですが、編集や他の操作ができないことを示します。 +- **`aria-grabbed`**: ドラッグアンドドロップの操作で、オブジェクトが 'つかまれている' 状態を示します。 + +(ARIA のすべてのステートの一覧については、[ARIA のステートとプロパティの一覧](http://www.w3.org/TR/wai-aria/states_and_properties)をご覧ください。) + +開発者は UI ウィジェット要素の状態を示すために ARIA のステートを使用して、ステートの変化に基づく視覚的外見の変更に (スクリプトを使用して要素のクラス名を変更するのではなく) CSS の属性セレクタを使用しましょう。 + +#### 可視性の変化 + +コンテンツの可視性を変えるとき (例えば要素を隠したり表示したりする)、開発者は **`aria-hidden`** プロパティの値を変更するとよいでしょう。先に説明した手法を、`display:none` を使用して要素を視覚的に隠すという CSS を示すために使用しましょう。 + +これは、可視性の制御に **`aria-hidden`** を使用するツールチップの例です。この例では、入力フィールドに関する指示を収めたツールチップを持つシンプルな Web フォームの例を示しています。例の中で関係する部分を、以下で説明します。 + +この例でツールチップ用の HTML は、例 2a で示す形式になっています。9 行目で **`aria-hidden`** を `true` に設定しています。 + +_例 2a: ツールチップ用の HTML_ + +```html +
+ + + +
+``` + +このマークアップ用の CSS を例 2b で示します。ここでは独自のクラス名を使用せず、1 行目で **`aria-hidden`** 属性の状態のみを使用していることに注意してください。 + +_例 2b: 状態を示すための、属性セレクタ_ + +```css +div.tooltip[aria-hidden="true"] { + display: none; +} +``` + +**>`aria-hidden`** プロパティを更新するための JavaScript は、例 2c で示す形式になっています。このスクリプトは **>`aria-hidden`** 属性しか更新しないことに注意してください (2 行目)。独自のクラス名の追加や削除は不要です。 + +_例 2c: aria-hidden 属性を更新する JavaScript_ + +```js +var showTip = function(el) { + el.setAttribute('aria-hidden', 'false'); +} +``` + +### ロールの変化 + +> **Note:** 作成中 + +ARIA によって開発者は、誤った意味を持っていたり意味が存在しない要素に対して意味的なロールを宣言することができます。例えばメニューを作るために順番付けがないリストを使用するとき、{{HTMLElement("ul")}} に `menubar` の **`role`** を、各々の {{HTMLElement("li")}} に `menuitem` の **`role`** を与えるべきです。 + +要素の **`role`** を変更するべきではありません。代わりに元の要素を削除して、新たな **`role`** の要素で置き換えてください。 + +例えば "インライン編集" ウィジェットについて考えてみましょう: これはコンテキストを切り替えることなく、ユーザがその場でひとまとまりのテキストを編集できるコンポーネントです。このコンポーネントは、テキストの編集はできませんがアクティブが可能な "閲覧" モードと、テキストの編集が可能な "編集" モードがあります。開発者は、ARIA の **`role`** を `button` に設定した読み取り専用の text 型 {{HTMLElement("input")}} 要素で "閲覧" モードを実装して、要素を書き換え可能にするとともに "閲覧" モードの **`role`** 属性を削除する ({{HTMLElement("input")}} は自身のロールを意味として持っているため) ことで "編集" モードに切り替えようと考えるでしょう。 + +これを行ってはいけません。代わりに **`role`** が `button` である {{HTMLElement("div")}} や {{HTMLElement("span")}} といった、まったく別の要素を使用して "閲覧" モードを、また text 型の {{HTMLElement("input")}} 要素を要して "編集" モードを実装してください。 + +### 非同期のコンテンツ変更 + +> **Note:** 作成中です。[Live Regions](/ja/docs/ARIA/Live_Regions "Live Regions") もご覧ください。 + +## キーボードナビゲーション + +開発者は、独自のウィジェットを作成する際にキーボードのサポートを見落とすことがよくあります。さまざまなユーザにとってアクセシブルにするために、すべての Web アプリケーションやウィジェットはマウスを必要とせずにキーボードでも操作できるようにするべきです。実際、通常これはデスクトップにおける同様のウィジェットがサポートする慣習への準拠度を向上させて、Tab、Enter、スペース、矢印キーのあらゆる利点を獲得します。 + +伝統的に、Web におけるキーボードナビゲーションは Tab キーに限定されてきました。ユーザはページ内の各リンク、ボタン、フォームへ順番にフォーカスを当てるために Tab キーを、逆順に進むために Shift-Tab を押します。これは一次元、つまり一度に 1 つの要素で、進むまたは戻るナビゲーションです。かなり分量の多いページでは、キーボードのみ使用するユーザは必要なセクションへアクセスするまでに何度も Tab キーを押さなければなりません。Web においてデスクトップスタイルのキーボード操作の慣習を実装すると、多くのユーでナビゲーションが劇的に高速化する可能性があります。 + +以下は、ARIA が有効な Web アプリケーションでどのようなキーボードナビゲーションが動作すべきかの概要です: + +- Tab キーは、全体としてウィジェットへフォーカスを当てます。例えばメニューバーで Tab キーを押すと、メニューの最初の項目にフォーカスを当てるべきです。 +- 矢印キーは、ウィジェット内での選択やナビゲーションをできるべきです。例えば左または右矢印キーを使用すると、前や次のメニュー項目にフォーカスを移動できます。 +- フォームの中にないウィジェットは、Enter やスペースキーでコントロールの選択やアクティブ化を行うべきです。 +- フォーム内で、スペースキーはコントロールの選択やアクティブ化を、Enter キーはフォームのデフォルトのアクションの実行を行うべきです。 +- 迷った場合はあなたが作成するコントールの、デスクトップにおける標準的な動作を模倣しましょう。 + +従って前出のタブウィジェットの例では、ユーザが Tab および Shift+Tab キーを使用してウィジェットのコンテナ (マークアップにおける \
    ) に出入りするナビゲーションを行えるとよいでしょう。キーボードのフォーカスがコンテナ内に入ったら、矢印キーで各々のタブ (\
  1. 要素) を行き来できるとよいでしょう。ここからは、プラットフォームによって慣習が異なります。Windows では、ユーザが矢印キーを押すと自動的に次のタブがアクティブ化されます。Mac OS X では、ユーザは次のタブをアクティブ化するために Enter またはスペースキーを押します。[キーボードでナビゲーション可能な JavaScript ウィジェット](/ja/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets "Accessibility/Keyboard-navigable JavaScript widgets")作成の包括的なチュートリアルで、このような動作を JavaScript で実装する方法を説明します。 + +デスクトップスタイルのキーボードナビゲーションの慣習に関する詳細として、包括的な [DHTML style guide](http://access.aol.com/dhtml-style-guide-working-group/) があります。これは、ARIA がサポートする各種ウィジェットで動作すべきキーボードナビゲーションは何かの概要を示します。W3C でもさまざまなウィジェット向けのキーボードナビゲーションやショートカットの慣習を収めた、[ARIA Best Practices](http://www.w3.org/WAI/PF/aria-practices/Overview.html) の有用なドキュメントを提供しています。 + +## 関連情報 + +- [ARIA](/ja/docs/ARIA "ARIA") +- [Web アプリケーションと ARIA の FAQ](/ja/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ "Web applications and ARIA FAQ") +- [WAI-ARIA Specification](http://www.w3.org/TR/wai-aria/) +- [WAI-ARIA Best Practices](http://www.w3.org/WAI/PF/aria-practices/Overview.html) +- [DHTML Style Guide](http://access.aol.com/dhtml-style-guide-working-group/) diff --git a/files/ja/web/accessibility/aria/aria_guides/index.html b/files/ja/web/accessibility/aria/aria_guides/index.html deleted file mode 100644 index 3bebf397ddc29c..00000000000000 --- a/files/ja/web/accessibility/aria/aria_guides/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: ARIA ガイド -slug: Web/Accessibility/ARIA/ARIA_Guides -tags: - - ARIA -translation_of: Web/Accessibility/ARIA/ARIA_Guides ---- -

    Accessible Rich Internet Applications (ARIA) は障がいのある人にとってウェブをもっとアクセシブルにする方法です。それに従ういくつかのガイドラインは、ウィジェットの配置のためのドラッグアンドドロップのように、よりよいアクセシビリティを保証します。

    - -
      -
    • フォームのエラー処理
      • -
    • ウィジェットへのラベルづけ
      • -
    • 複合ウィジェットや領域のラベルづけ
      • -
    • 複合ウィジェットのフォーカス管理 (aria-activedescendant vs roving tabindex)
      • -
    • ランドマークロールを使う
      • -
    • 動的更新とライブ領域を扱う
      • -
    • AT製品の仮想と非仮想モード
      • -
    • ドラッグアンドドロップを使う
      • -
    • 非ARIA なスクリーンリーダーのユーザーへの通知
      • -
    • プレゼンテーションロールの構造を固定する
      • -
    • レイアウト表を隠す
      • -
    • モーダルと非モーダルなダイアログを管理する
      • -
    • HTML5 で ARIA を使う
      • -
    • ARIA をテストする方法
      • -
    • モバイル端末での ARIA
      • -
    diff --git a/files/ja/web/accessibility/aria/aria_guides/index.md b/files/ja/web/accessibility/aria/aria_guides/index.md new file mode 100644 index 00000000000000..2ce3d62aad6af3 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_guides/index.md @@ -0,0 +1,24 @@ +--- +title: ARIA ガイド +slug: Web/Accessibility/ARIA/ARIA_Guides +tags: + - ARIA +translation_of: Web/Accessibility/ARIA/ARIA_Guides +--- +Accessible Rich Internet Applications (**ARIA**) は障がいのある人にとってウェブをもっとアクセシブルにする方法です。それに従ういくつかのガイドラインは、ウィジェットの配置のためのドラッグアンドドロップのように、よりよいアクセシビリティを保証します。 + +- フォームのエラー処理 +- ウィジェットへのラベルづけ +- 複合ウィジェットや領域のラベルづけ +- 複合ウィジェットのフォーカス管理 (aria-activedescendant vs roving tabindex) +- ランドマークロールを使う +- 動的更新とライブ領域を扱う +- AT 製品の仮想と非仮想モード +- ドラッグアンドドロップを使う +- 非 ARIA なスクリーンリーダーのユーザーへの通知 +- プレゼンテーションロールの構造を固定する +- レイアウト表を隠す +- モーダルと非モーダルなダイアログを管理する +- HTML5 で ARIA を使う +- ARIA をテストする方法 +- モバイル端末での ARIA diff --git a/files/ja/web/accessibility/aria/aria_live_regions/index.html b/files/ja/web/accessibility/aria/aria_live_regions/index.html deleted file mode 100644 index 4dcaac17e6bb6b..00000000000000 --- a/files/ja/web/accessibility/aria/aria_live_regions/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: ARIA ライブリージョン -slug: Web/Accessibility/ARIA/ARIA_Live_Regions -tags: - - ARIA - - Accessibility - - ariaLive -translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions ---- -

    JavaScript を使うと、検索結果のリストを瞬時に更新する、もしくはユーザーの操作を必要としないような控えめなアラートや通知を表示するなど、ページ全体をリロードせずにページの一部を動的に変更することができます。 これらの変更は通常ページを見ることのできるユーザーにとっては視覚的に明らかですが、支援技術ユーザーにとっては明確ではないかもしれません。ARIA ライブリージョンはこのギャップを埋め、動的なコンテンツの変更を支援技術により通知できるやり方で、プログラムによって表出させる方法を提供します。

    - -
    -

    注記: 支援技術はライブリージョンへのコンテンツの動的な変更を通知します。ライブリージョンはブラウザーと支援技術が認識できるように最初から（かつ空で）存在しなければなりません。続いて後に起こる変更は通知されます。

    - -

    単に読み込まれた最初のマークアップに aria-live 属性もしくは 特化したライブリージョン role （例えば role="alert" など）を含めても何も効果はありません。

    - -

    aria-live 属性もしくは特化した role をドキュメントへ動的に追加しても支援技術による通知は発生しません (その時点で支援技術はまだライブリージョンを認識していないので、変更を監視することができません)。

    - -

    常にライブリージョンが最初からドキュメントに存在することを確認して動的なコンテンツの追加／変更をしてください。

    -
    - -

    単純なライブリージョン

    - -

    ページのリロードなしに更新される動的なコンテンツは、ほとんどの場合領域もしくはウィジェットのどちらかです。 対話的でないシンプルなコンテンツの変更は、ライブリージョンとして記されるべきです。以下は、関連する ARIA ライブリージョンプロパティと説明の一覧です。

    - -
      -
    1. aria-live: aria-live=POLITENESS_SETTING はスクリーンリーダーがライブリージョンの更新処理の優先度を設定するために使われます。設定は off、polite、 assertive で、デフォルトは off です。この属性は間違いなく最も重要な属性です。
      2. -
    2. -

      aria-controls: aria-controls=[IDLIST] は領域とそれをコントロールするものを関連付けるために使用されます。領域は div の id のように識別され、スペースを用いて複数の領域を aria-controls に関連付けることができます。例えば aria-controls="myRegionID1 myRegionsID2"。

      - -
      ライブリージョンの aria-controls の側面が現在の AT に実装されているか、どの AT で実装されているかはわかりません。調査が必要です。
      -
      3. -
    - -

    通常、aria-live="polite" のみが使われます。ユーザーにとって重要な更新を受け取るが、うるさくなるほど速くすべきでない領域にはこの属性を設定すべきです。スクリーンリーダーはユーザーがアイドル状態になったときに読み上げを行います。

    - -

    重要ではない、もしくは迅速な更新や他の理由からうるさくなるような領域は、aria-live="off" で黙らせます。

    - - - -

    ある惑星についての情報を提供することに特化したウェブサイトはドロップダウンボックスを提供します。ドロップダウンから惑星が選ばれたとき、選択された惑星の情報でページ上のリージョンは更新されます。

    - -

    HTML

    - -
    <fieldset>
-  <legend>Planet information</legend>
-  <label for="planetsSelect">Planet:</label>
-  <select id="planetsSelect" aria-controls="planetInfo">
-    <option value="">Select a planet&hellip;</option>
-    <option value="mercury">Mercury</option>
-    <option value="venus">Venus</option>
-    <option value="earth">Earth</option>
-    <option value="mars">Mars</option>
-  </select>
-  <button id="renderPlanetInfoButton">Go</button>
-</fieldset>
-
-<div role="region" id="planetInfo" aria-live="polite">
-  <h2 id="planetTitle">No planet selected</h2>
-  <p id="planetDescription">Select a planet to view its description</p>
-</div>
-
-<p><small>Information courtesy <a href="https://en.wikipedia.org/wiki/Solar_System#Inner_Solar_System">Wikipedia</a></small></p>
-
    - -

    JavaScript

    - -
    const PLANETS_INFO = {
-  mercury: {
-    title: 'Mercury',
-    description: 'Mercury is the smallest and innermost planet in the Solar System. It is named after the Roman deity Mercury, the messenger to the gods.'
-  },
-
-  venus: {
-    title: "Venus",
-    description: 'Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.'
-  },
-
-  earth: {
-    title: "Earth",
-    description: 'Earth is the third planet from the Sun and the only object in the Universe known to harbor life.'
-  },
-
-  mars: {
-    title: "Mars",
-    description: 'Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System after Mercury. In English, Mars carries a name of the Roman god of war, and is often referred to as the "Red Planet".'
-  }
-};
-
-function renderPlanetInfo(planet) {
-  const planetTitle = document.querySelector('#planetTitle');
-  const planetDescription = document.querySelector('#planetDescription');
-
-  if (planet in PLANETS_INFO) {
-    planetTitle.textContent = PLANETS_INFO[planet].title;
-    planetDescription.textContent = PLANETS_INFO[planet].description;
-  } else {
-    planetTitle.textContent = 'No planet selected';
-    planetDescription.textContent = 'Select a planet to view its description';
-  }
-}
-
-const renderPlanetInfoButton = document.querySelector('#renderPlanetInfoButton');
-
-renderPlanetInfoButton.addEventListener('click', event => {
-  const planetsSelect = document.querySelector('#planetsSelect');
-  const selectedPlanet = planetsSelect.options[planetsSelect.selectedIndex].value;
-
-  renderPlanetInfo(selectedPlanet);
-});
-
    - -

    {{EmbedLiveSample('Dropdown_box_updates_useful_onscreen_information', '', 350)}}

    - -

    ユーザーが新しい惑星を選択したとき、ライブリージョンの情報が通知されます。ライブリージョンは aria-live="polite" を持っているため、更新の通知が行われる前にユーザーが一時停止するまでスクリーンリーダーは待ちます。例えばリストを下りながら他の惑星を選択してもライブリージョンの更新は通知されないでしょう。最終的に選ばれた惑星のみライブリージョンの更新は通知されます。

    - -

    ここにはライブリージョンへ (字幕を通して) 更新を通知している、Mac に内蔵している VoiceOver のスクリーンショットがあります:

    - -

    A screenshot of VoiceOver on Mac announcing the update to a live region. Subtitles are shown in the picture.

    - -

    優先する専門のライブリージョンロール

    - -

    次のよく知られている事前に定義されているケースでは、専門的に用意された "ライブリージョンロール" を使ったほうが良いでしょう:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ロール説明互換性に関する注意事項
    logチャット、エラー、ゲームもしくは別種のログ互換性を最大限にするために、このロールを使う際には冗長な aria-live="polite" を追加します。
    statusある種の更新された状態を表すステータスバーもしくはスクリーン領域。スクリーンリーダーのユーザーは現在のステータスを読みとるための特別なコマンドを持っています。互換性を最大限にするために、このロールを使う際には冗長な aria-live="polite" を追加します。
    alertスクリーン上で点滅するエラーもしくはアラートメッセージ。アラートは特に、クライアントサイドでユーザーへのバリデーションの通知で重要です。(TBD: ARIAフォームのチュートリアルへのリンク)互換性を最大限にするために、このロールを使う際に aria-live="assertive" を追加するよう勧める人もいます。しかし、aria-live と role=alert の両方を追加することは iOS の VoiceOver で二重に読み上げられてしまうという問題を引き起こします。
    progressbarウィジェットとライブリージョンのハイブリッド。aria-valuemin や aria-valuenow、aria-valuemax と共に使います。
    marquee株式相場表示機のようなスクロールするテキストのためのものです。
    timerカウントダウンタイマーやストップウォッチなどの、ある種のタイマーや時計。
    - -

    高度なライブリージョン

    - -

    (TBD: OS/Browser/AT の組み合わせによる個々の属性についてのサポートに関するより詳しい情報)。

    - -

    一般的なライブリージョンへのサポートはバージョン 10.0 の JAWS へ追加されました。Windows Eyes ではバージョン 8.0 以降から「Microsoft Internet Explorer と Mozilla Firefox でブラウザーモード外での使用で」ライブリージョンをサポートしています。 NVDA は 2008年 に Mozilla Firefox に対するいくつかの基本的なライブリージョンのサポートを追加し、2010 年から 2014 年までに改善されました。2015 年には Internet Explorer (MSHTML) 向けにも基本的なライブリージョンのサポートが追加されました。

    - -

    The Paciello Group は、ライブリージョンのサポート状況についての情報 (2014) をいくつかもっています。Paul Jadam は特に aira-atomic と aria-relevant のサポートについてのリサーチをしました。

    - -
      -
    1. aria-atomic: aria-atomic=BOOLEAN は領域の一部だけが変更された場合でも、スクリーンリーダーが常にライブリージョン全体を読み上げるかどうかを設定します。可能な設定は false または true で、デフォルトは false です。
      2. -
    2. aria-relevant: aria-relevant=[LIST_OF_CHANGES] はどういったタイプの変更がライブリージョンに関連するかを設定します。可能な設定は additions、removals、text、all で、 additions text がデフォルトです。
      3. -
    3. aria-labelledby: aria-labelledby=[IDLIST] は領域とラベルを関連付けるために使われます。aria-controls と似ていますが、複数のラベルを領域へ関連付けられ、複数のラベル識別子は空白によって区切られます。
      4. -
    4. aria-describedby: aria-describedby=[IDLIST] は領域と説明の関連付けを行います。aria-controls と似ていますが、複数の説明を領域を関連付けられ、説明の識別子は空白によって区切られます。
      5. -
    - -

    高度なユースケース: Clock

    - -

    aria-atomic についての説明のために、時間と分を表するシンプルな時計を表示するサイトを考えます。時計は単に現在のコンテンツを上書きする、新しい残り時間により毎分更新されます。

    - -
    <div id="clock" role="timer" aria-live="polite"></div>
-
    - -
    /* basic JavaScript to update the clock */
-
-setInterval(function() {
-  var now = new Date();
-  document.getElementById('clock').innerHTML = "Time: " + now.getHours() + ":" + ("0"+now.getMinutes()).substr(-2);
-}, 60000);
-
    - -

    最初の関数が実行されると、追加された文字列のすべてが通知されます。 その後の呼び出しでは、過去のコンテンツと比較して変更されたコンテンツの一部が通知されます。例えば、時計が "17:33" から "17:34" へ変更されたとき、支援技術は "4" のみを通知します。これはユーザーにとってほとんど役に立たないでしょう。

    - -

    一つの回避策は最初にライブリージョンのコンテンツをクリアしてから、新しいコンテンツを挿入することです。しかしながら、この方法はこれら二更新の正確なタイミングに依存するため、しばしば信頼性にかけることがあります。

    - -

    aria-atomic="true" はライブリージョンが更新されるたびに、コンテンツの更新がすべて (例 "Time: 17:34") 通知されることを保証します。

    - -
    <div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div>
-
    - -

    高度なユースケース: Roster

    - -

    チャットサイトでは、現在ログインしているユーザーを表示したいと思うでしょう。ページをリロードすることなく、ユーザーのログインおよびログアウトステータスが動的に反映されるユーザーの一覧を表示します。

    - -
    <ul id="roster" aria-live="polite" aria-relevant="additions removals">
-	<!-- use JavaScript to add remove users here-->
-</ul>
-
    - -

    ARIA ライブプロパティの内訳:

    - -
      -
    • aria-live="polite" はスクリーンリーダーが更新をユーザーへ通知する前に、ユーザーがアイドル状態になるまで待つべきであることを示しています。"assertive" でユーザーを中断すると、ユーザーのフローを妨げるかもしれないためこれが最も一般的に使用される値です。
      • -
    • 追加または削除されたユーザーのみが読み上げられるべきで、全体の roster は都度読み上げられるべきではありません。そのため aria-atomic は設定されていません (デフォルトの false が入ります)。
      • -
    • aria-relevant="additions removals" により追加もしくは削除されたユーザーが読み上げられることを確かにします。
      • -
    - -

    関連情報

    - - diff --git a/files/ja/web/accessibility/aria/aria_live_regions/index.md b/files/ja/web/accessibility/aria/aria_live_regions/index.md new file mode 100644 index 00000000000000..0ea74962a99d34 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_live_regions/index.md @@ -0,0 +1,190 @@ +--- +title: ARIA ライブリージョン +slug: Web/Accessibility/ARIA/ARIA_Live_Regions +tags: + - ARIA + - Accessibility + - ariaLive +translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions +--- +JavaScript を使うと、検索結果のリストを瞬時に更新する、もしくはユーザーの操作を必要としないような控えめなアラートや通知を表示するなど、ページ全体をリロードせずにページの一部を動的に変更することができます。 これらの変更は通常ページを見ることのできるユーザーにとっては視覚的に明らかですが、支援技術ユーザーにとっては明確ではないかもしれません。ARIA ライブリージョンはこのギャップを埋め、動的なコンテンツの変更を支援技術により通知できるやり方で、プログラムによって表出させる方法を提供します。 + +> **Note:** 支援技術はライブリージョンへのコンテンツの動的な変更を通知します。ライブリージョンはブラウザーと支援技術が認識できるように最初から（かつ空で）存在しなければなりません。続いて後に起こる変更は通知されます。 +> +> 単に読み込まれた最初のマークアップに `aria-live` 属性もしくは 特化したライブリージョン `role` （例えば `role="alert"` など）を含めても何も効果はありません。 +> +> `aria-live` 属性もしくは特化した `role` をドキュメントへ動的に追加しても支援技術による通知は発生しません (その時点で支援技術はまだライブリージョンを認識していないので、変更を監視することができません)。 +> +> 常にライブリージョンが最初からドキュメントに存在することを確認して動的なコンテンツの追加／変更をしてください。 + +## 単純なライブリージョン + +ページのリロードなしに更新される動的なコンテンツは、ほとんどの場合領域もしくはウィジェットのどちらかです。 対話的でないシンプルなコンテンツの変更は、ライブリージョンとして記されるべきです。以下は、関連する ARIA ライブリージョンプロパティと説明の一覧です。 + +1. **`aria-live`**: `aria-live=POLITENESS_SETTING` はスクリーンリーダーがライブリージョンの更新処理の優先度を設定するために使われます。設定は `off`、`polite`、` assertive` で、デフォルトは `off` です。この属性は間違いなく最も重要な属性です。 +2. **`aria-controls`**: `aria-controls=[IDLIST]` は領域とそれをコントロールするものを関連付けるために使用されます。領域は `div` の `id` のように識別され、スペースを用いて複数の領域を aria-controls に関連付けることができます。例えば `aria-controls="myRegionID1 myRegionsID2"`。 + + > **Warning:** ライブリージョンの aria-controls の側面が現在の AT に実装されているか、どの AT で実装されているかはわかりません。調査が必要です。 + +通常、`aria-live="polite"` のみが使われます。ユーザーにとって重要な更新を受け取るが、うるさくなるほど速くすべきでない領域にはこの属性を設定すべきです。スクリーンリーダーはユーザーがアイドル状態になったときに読み上げを行います。 + +重要ではない、もしくは迅速な更新や他の理由からうるさくなるような領域は、`aria-live="off"` で黙らせます。 + +### 有益な画面上の情報を更新するドロップダウンボックス + +ある惑星についての情報を提供することに特化したウェブサイトはドロップダウンボックスを提供します。ドロップダウンから惑星が選ばれたとき、選択された惑星の情報でページ上のリージョンは更新されます。 + +#### HTML + +```html +
    + Planet information + + + +
    + +
    +

    No planet selected

    +

    Select a planet to view its description

    +
    + +

    Information courtesy Wikipedia

    +``` + +#### JavaScript + +```js +const PLANETS_INFO = { + mercury: { + title: 'Mercury', + description: 'Mercury is the smallest and innermost planet in the Solar System. It is named after the Roman deity Mercury, the messenger to the gods.' + }, + + venus: { + title: "Venus", + description: 'Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.' + }, + + earth: { + title: "Earth", + description: 'Earth is the third planet from the Sun and the only object in the Universe known to harbor life.' + }, + + mars: { + title: "Mars", + description: 'Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System after Mercury. In English, Mars carries a name of the Roman god of war, and is often referred to as the "Red Planet".' + } +}; + +function renderPlanetInfo(planet) { + const planetTitle = document.querySelector('#planetTitle'); + const planetDescription = document.querySelector('#planetDescription'); + + if (planet in PLANETS_INFO) { + planetTitle.textContent = PLANETS_INFO[planet].title; + planetDescription.textContent = PLANETS_INFO[planet].description; + } else { + planetTitle.textContent = 'No planet selected'; + planetDescription.textContent = 'Select a planet to view its description'; + } +} + +const renderPlanetInfoButton = document.querySelector('#renderPlanetInfoButton'); + +renderPlanetInfoButton.addEventListener('click', event => { + const planetsSelect = document.querySelector('#planetsSelect'); + const selectedPlanet = planetsSelect.options[planetsSelect.selectedIndex].value; + + renderPlanetInfo(selectedPlanet); +}); +``` + +#### 結果 + +{{EmbedLiveSample('Dropdown_box_updates_useful_onscreen_information', '', 350)}} + +ユーザーが新しい惑星を選択したとき、ライブリージョンの情報が通知されます。ライブリージョンは `aria-live="polite"` を持っているため、更新の通知が行われる前にユーザーが一時停止するまでスクリーンリーダーは待ちます。例えばリストを下りながら他の惑星を選択してもライブリージョンの更新は通知されないでしょう。最終的に選ばれた惑星のみライブリージョンの更新は通知されます。 + +ここにはライブリージョンへ (字幕を通して) 更新を通知している、Mac に内蔵している VoiceOver のスクリーンショットがあります: + +![A screenshot of VoiceOver on Mac announcing the update to a live region. Subtitles are shown in the picture.](Web_Accessibility_ARIA_ARIA_Live_Regions.png) + +## 優先する専門のライブリージョンロール + +次のよく知られている事前に定義されているケースでは、専門的に用意された "ライブリージョンロール" を使ったほうが良いでしょう: + +| ロール | 説明 | 互換性に関する注意事項 | +| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| log | チャット、エラー、ゲームもしくは別種のログ | 互換性を最大限にするために、このロールを使う際には冗長な `aria-live="polite"` を追加します。 | +| status | ある種の更新された状態を表すステータスバーもしくはスクリーン領域。スクリーンリーダーのユーザーは現在のステータスを読みとるための特別なコマンドを持っています。 | 互換性を最大限にするために、このロールを使う際には冗長な `aria-live="polite"` を追加します。 | +| alert | スクリーン上で点滅するエラーもしくはアラートメッセージ。アラートは特に、クライアントサイドでユーザーへのバリデーションの通知で重要です。(TBD: ARIA フォームのチュートリアルへのリンク) | 互換性を最大限にするために、このロールを使う際に `aria-live="assertive"` を追加するよう勧める人もいます。しかし、`aria-live` と `role=alert` の両方を追加することは iOS の VoiceOver で二重に読み上げられてしまうという問題を引き起こします。 | +| progressbar | ウィジェットとライブリージョンのハイブリッド。aria-valuemin や aria-valuenow、aria-valuemax と共に使います。 | | +| marquee | 株式相場表示機のようなスクロールするテキストのためのものです。 | | +| timer | カウントダウンタイマーやストップウォッチなどの、ある種のタイマーや時計。 | | + +## 高度なライブリージョン + +(TBD: OS/Browser/AT の組み合わせによる個々の属性についてのサポートに関するより詳しい情報)。 + +一般的なライブリージョンへのサポートはバージョン 10.0 の JAWS へ追加されました。Windows Eyes ではバージョン 8.0 以降から「Microsoft Internet Explorer と Mozilla Firefox でブラウザーモード外での使用で」ライブリージョンをサポートしています。 NVDA は 2008 年 に Mozilla Firefox に対するいくつかの基本的なライブリージョンのサポートを追加し、2010 年から 2014 年までに改善されました。2015 年には Internet Explorer (MSHTML) 向けにも基本的なライブリージョンのサポートが追加されました。 + +The Paciello Group は、[ライブリージョンのサポート状況についての情報](https://www.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/) (2014) をいくつかもっています。Paul Jadam は特に [aira-atomic と aria-relevant のサポート](http://pauljadam.com/demos/aria-atomic-relevant.html)についてのリサーチをしました。 + +1. **`aria-atomic`**: `aria-atomic=BOOLEAN` は領域の一部だけが変更された場合でも、スクリーンリーダーが常にライブリージョン全体を読み上げるかどうかを設定します。可能な設定は `false` または `true` で、デフォルトは `false` です。 +2. [**``aria-relevant**](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute "Using_the_aria-relevant_attribute"): `aria-relevant=[LIST_OF_CHANGES]` はどういったタイプの変更がライブリージョンに関連するかを設定します。可能な設定は `additions`、`removals`、`text`、`all` で、 `additions text` がデフォルトです。 +3. **`aria-labelledby`**: `aria-labelledby=[IDLIST]` は領域とラベルを関連付けるために使われます。`aria-controls` と似ていますが、複数のラベルを領域へ関連付けられ、複数のラベル識別子は空白によって区切られます。 +4. **`aria-describedby`**: `aria-describedby=[IDLIST]` は領域と説明の関連付けを行います。`aria-controls` と似ていますが、複数の説明を領域を関連付けられ、説明の識別子は空白によって区切られます。 + +### 高度なユースケース: Clock + +`aria-atomic` についての説明のために、時間と分を表するシンプルな時計を表示するサイトを考えます。時計は単に現在のコンテンツを上書きする、新しい残り時間により毎分更新されます。 + +``` +
    +``` + +```js +/* basic JavaScript to update the clock */ + +setInterval(function() { + var now = new Date(); + document.getElementById('clock').innerHTML = "Time: " + now.getHours() + ":" + ("0"+now.getMinutes()).substr(-2); +}, 60000); +``` + +最初の関数が実行されると、追加された文字列のすべてが通知されます。 その後の呼び出しでは、過去のコンテンツと比較して変更されたコンテンツの一部が通知されます。例えば、時計が "17:33" から "17:34" へ変更されたとき、支援技術は "4" のみを通知します。これはユーザーにとってほとんど役に立たないでしょう。 + +一つの回避策は最初にライブリージョンのコンテンツをクリアしてから、新しいコンテンツを挿入することです。しかしながら、この方法はこれら二更新の正確なタイミングに依存するため、しばしば信頼性にかけることがあります。 + +`aria-atomic="true"` はライブリージョンが更新されるたびに、コンテンツの更新がすべて (例 "Time: 17:34") 通知されることを保証します。 + +``` +
    +``` + +### 高度なユースケース: Roster + +チャットサイトでは、現在ログインしているユーザーを表示したいと思うでしょう。ページをリロードすることなく、ユーザーのログインおよびログアウトステータスが動的に反映されるユーザーの一覧を表示します。 + +``` +
      + +
    +``` + +ARIA ライブプロパティの内訳: + +- `aria-live="polite"` はスクリーンリーダーが更新をユーザーへ通知する前に、ユーザーがアイドル状態になるまで待つべきであることを示しています。"assertive" でユーザーを中断すると、ユーザーのフローを妨げるかもしれないためこれが最も一般的に使用される値です。 +- 追加または削除されたユーザーのみが読み上げられるべきで、全体の roster は都度読み上げられるべきではありません。そのため `aria-atomic` は設定されていません (デフォルトの `false` が入ります)。 +- `aria-relevant="additions removals"` により追加もしくは削除されたユーザーが読み上げられることを確かにします。 + +## 関連情報 + +- [ARIA Roles](/ja/docs/Web/Accessibility/ARIA/Roles) diff --git a/files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html b/files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html deleted file mode 100644 index a62f6ac1371f7d..00000000000000 --- a/files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: ARIA Screen Reader Implementors Guide -slug: Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide -translation_of: Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide ---- -

    Live Regions

    - -

    This is just a guide. Live region markup is a complex area which is somewhat open to interpretation. The following is intended to provide implementation guidance that respects screen readers developers' need to try different things. The intention is to strike a balance between providing useful guidance on how to use the markup's intended meaning while supporting live regions as an area for screen readers to innovate and compete.

    - -

    Interpreting WAI-ARIA live region markup

    - -
      -
    1. Live changes are hints: in general live region markup is provided by the author as hints, and the assistive technology may allow for global, site or even region-specific settings, as well as heuristics to help with live changes on pages that have no WAI-ARIA hints.
      2. -
    2. Optionally, create a second, additional queue if the user configures a second hardware channel: If there are two channels for presentation (e.g. text to speech and a Braille display), then two queues can be maintained to allow for parallel presentation. The channels could be user configured for presenting live regions based on role or politeness.
      3. -
    3. Busy regions: Any changes in a region marked with aria-busy="true" should not be added to the queue until that attribute is cleared.
      4. -
    4. Politeness (aria-live or from role) takes first precedence,: items should be added to the queue based on their politeness level from the aria-live property or inherited from the role (e.g. role="log" is polite by default). Assertive items are first then politeness level. Alternatively, implementations may choose to have a policy of clearing more polite items, e.g. assertive items clear any polite items from the queue.
      5. -
    5. Time takes second precedence: Prioritize items with the same politeness level according to when the event occurs (earlier events come first). Present items of the same politeness level in the order of what occurred first.
      6. -
    6. Atomic (aria-atomic="true") regions with multiple changes should not be presented twice with the same content. As a new event for an atomic region is added to the queue remove an earlier event for the same region. It is probably desirable to have at least a tiny timeout before presenting atomic region changes, in order to avoid presenting the region twice for two changes that occur quickly one after the other.
      7. -
    7. Include labels when presenting changes: if the change occurs in something with a semantic label of some kind, speak the label. This is particularly important for changes in data cells, where the column and row headers provide important contextual information.
      8. -
    - -

    Ideas for Settings and Heuristics

    - -
      -
    1. Allow for a different voice (in text-to-speech) or other varying presentational characteristics to set live changes apart.
      2. -
    2. When no WAI-ARIA markup is present, automatically present some changes unless the user configures all live changes to off. For example, automatically speak changes that are caused by the user's own input, as part of the context of that input.
      3. -
    3. Allow global settings to turn off the presentation of live changes, present all live changes, use markup, or be "smart" (use heuristics)
      4. -
    - -

    Details for Processing via Platform Accessibility APIs

    - -

    We hope browser manufacturers will work to provide consistent implementations. The most complete implementation of live regions currently is in Firefox 3. Here is how WAI-ARIA live regions are exposed in Firefox 3.

    diff --git a/files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/index.md b/files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/index.md new file mode 100644 index 00000000000000..deff41bf4890dd --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/index.md @@ -0,0 +1,28 @@ +--- +title: ARIA Screen Reader Implementors Guide +slug: Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide +translation_of: Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide +--- +## Live Regions + +This is just a guide. Live region markup is a complex area which is somewhat open to interpretation. The following is intended to provide implementation guidance that respects screen readers developers' need to try different things. The intention is to strike a balance between providing useful guidance on how to use the markup's intended meaning while supporting live regions as an area for screen readers to innovate and compete. + +### Interpreting WAI-ARIA live region markup + +1. Live changes are hints: in general live region markup is provided by the author as hints, and the assistive technology may allow for global, site or even region-specific settings, as well as heuristics to help with live changes on pages that have no WAI-ARIA hints. +2. Optionally, create a second, additional queue if the user configures a second hardware channel: If there are two channels for presentation (e.g. text to speech and a Braille display), then two queues can be maintained to allow for parallel presentation. The channels could be user configured for presenting live regions based on role or politeness. +3. Busy regions: Any changes in a region marked with aria-busy="true" should not be added to the queue until that attribute is cleared. +4. Politeness (aria-live or from role) takes first precedence,: items should be added to the queue based on their politeness level from the aria-live property or inherited from the role (e.g. role="log" is polite by default). Assertive items are first then politeness level. Alternatively, implementations may choose to have a policy of clearing more polite items, e.g. assertive items clear any polite items from the queue. +5. Time takes second precedence: Prioritize items with the same politeness level according to when the event occurs (earlier events come first). Present items of the same politeness level in the order of what occurred first. +6. Atomic (aria-atomic="true") regions with multiple changes should not be presented twice with the same content. As a new event for an atomic region is added to the queue remove an earlier event for the same region. It is probably desirable to have at least a tiny timeout before presenting atomic region changes, in order to avoid presenting the region twice for two changes that occur quickly one after the other. +7. Include labels when presenting changes: if the change occurs in something with a semantic label of some kind, speak the label. This is particularly important for changes in data cells, where the column and row headers provide important contextual information. + +### Ideas for Settings and Heuristics + +1. Allow for a different voice (in text-to-speech) or other varying presentational characteristics to set live changes apart. +2. When no WAI-ARIA markup is present, automatically present some changes unless the user configures all live changes to off. For example, automatically speak changes that are caused by the user's own input, as part of the context of that input. +3. Allow global settings to turn off the presentation of live changes, present all live changes, use markup, or be "smart" (use heuristics) + +### Details for Processing via Platform Accessibility APIs + +We hope browser manufacturers will work to provide consistent implementations. The most complete implementation of live regions currently is in Firefox 3. Here is how [WAI-ARIA live regions are exposed in Firefox 3](/ja/AJAX/WAI_ARIA_Live_Regions//API_Support "http://developer.mozilla.org/editor/fckeditor/core/editor/en/AJAX/WAI_ARIA_Live_Regions//API_Support"). diff --git a/files/ja/web/accessibility/aria/aria_techniques/index.html b/files/ja/web/accessibility/aria/aria_techniques/index.html deleted file mode 100644 index 5402dec2a3031c..00000000000000 --- a/files/ja/web/accessibility/aria/aria_techniques/index.html +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: 'ARIA を使用する: ロール、ステート、プロパティ' -slug: Web/Accessibility/ARIA/ARIA_Techniques -tags: - - ARIA - - Accessibility - - Overview - - Reference - - TopicStub -translation_of: Web/Accessibility/ARIA/ARIA_Techniques ---- -

    ロール

    - - - -

    ウィジェットロール

    - -
    - -
    - -

    複合ロール

    - -

    以下のテクニックでは、それぞれの複合ロールとその必須および任意の子ロールについて説明します。

    - -
    - -
    - -

    文書構造ロール

    - -
    - -
    - -

    ランドマークロール

    - -
    - -
    - -

    ライブリージョンロール

    - -
    - -
    - -

    ウィンドウロール

    - -
    - -
    - -

    ステートとプロパティ

    - -

    ウィジェット属性

    - -
    - -
    - -

    ライブリージョン属性

    - -
    - -
    - -

    ドラッグ＆ドロップ属性

    - -
    -
      -
    • aria-dropeffect
      • -
    • aria-dragged
      • -
    -
    - -

    関係属性

    - -
    -
      -
    • aria-activedescendant
      • -
    • aria-colcount
      • -
    • aria-colindex
      • -
    • aria-colspan
      • -
    • aria-controls
      • -
    • aria-describedby
      • -
    • aria-details
      • -
    • aria-errormessage
      • -
    • aria-flowto
      • -
    • aria-labelledby
      • -
    • aria-owns
      • -
    • aria-posinset
      • -
    • aria-rowcount
      • -
    • aria-rowindex
      • -
    • aria-rowspan
      • -
    • aria-setsize
      • -
    -
    - -

    MicrosoftEdge 固有のプロパティ

    - -
    - -
    diff --git a/files/ja/web/accessibility/aria/aria_techniques/index.md b/files/ja/web/accessibility/aria/aria_techniques/index.md new file mode 100644 index 00000000000000..77089b9b79a99d --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/index.md @@ -0,0 +1,170 @@ +--- +title: 'ARIA を使用する: ロール、ステート、プロパティ' +slug: Web/Accessibility/ARIA/ARIA_Techniques +tags: + - ARIA + - Accessibility + - Overview + - Reference + - TopicStub +translation_of: Web/Accessibility/ARIA/ARIA_Techniques +--- +## ロール + +### ウィジェットロール + +- [Button](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role) +- [Checkbox](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role) +- [Dialog](/ja/docs/Web/Accessibility/ARIA/Roles/dialog_role) +- [Gridcell](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_Gridcell_Role) +- [Link](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role) +- Menuitem +- Menuitemcheckbox +- Menuitemradio +- Option +- [Progressbar](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role) +- [Radio](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role) +- Scrollbar +- Searchbox +- Separator（フォーカス可能な場合） +- [Slider](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role) +- Spinbutton +- [Switch](/ja/docs/Web/Accessibility/ARIA/Roles/Switch_role) +- [Tab](/ja/docs/Web/Accessibility/ARIA/Roles/Tab_Role) +- [Tabpanel](/ja/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role) +- [Textbox](/ja/docs/Web/Accessibility/ARIA/Roles/textbox_role) +- Treeitem + +### 複合ロール + +以下のテクニックでは、それぞれの複合ロールとその必須および任意の子ロールについて説明します。 + +- Combobox +- [Grid](/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role) （[row](/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role), [gridcell](/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role), rowheader, columnheader ロールを含む） +- [Listbox ](/ja/docs/Web/Accessibility/ARIA/Roles/listbox_role)（option ロールを含む） +- Menu +- Menubar +- [Radiogroup （radio ロールを参照）](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role) +- [Tablist](/ja/docs/Web/Accessibility/ARIA/Roles/Tablist_Role) （[tab](/ja/docs/Web/Accessibility/ARIA/Roles/Tab_Role), [tabpanel](/ja/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role) ロールを含む） +- Tree +- Treegrid + +### 文書構造ロール + +- [Application](/ja/docs/Web/Accessibility/ARIA/Roles/Application_Role) +- [Article](/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role) +- [Cell](/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role) +- Columnheader +- Definition +- Directory +- [Document](/ja/docs/Web/Accessibility/ARIA/Roles/Document_Role) +- [Feed](/ja/docs/Web/Accessibility/ARIA/Roles/Feed_Role) +- [Figure](/ja/docs/Web/Accessibility/ARIA/Roles/Figure_Role) +- [Group](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role) +- [Grid](/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role) +- [Heading](/ja/docs/Web/Accessibility/ARIA/Roles/heading_role) +- [Img](/ja/docs/Web/Accessibility/ARIA/Roles/Role_Img) +- [List](/ja/docs/Web/Accessibility/ARIA/Roles/List_role) +- [Listitem](/ja/docs/Web/Accessibility/ARIA/Roles/Listitem_role) +- Math +- [None（presentation ロールと同義）](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role) +- Note +- [Presentation](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role) +- [Row](/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role) +- [Rowgroup](/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role) +- Rowheader +- Separator +- [Table](/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role) +- Term +- [Textbox](/ja/docs/Web/Accessibility/ARIA/Roles/textbox_role) +- Tooltip +- [Toolbar](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role) + +### ランドマークロール + +- [Banner](/ja/docs/Web/Accessibility/ARIA/Roles/Banner_role) +- [Complementary](/ja/docs/Web/Accessibility/ARIA/Roles/Complementary_role) +- [Contentinfo](/ja/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role) +- [Form](/ja/docs/Web/Accessibility/ARIA/Roles/Form_Role) +- [Main](/ja/docs/Web/Accessibility/ARIA/Roles/Main_role) +- [Navigation](/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role) +- [Region](/ja/docs/Web/Accessibility/ARIA/Roles/Region_role) +- [Search](/ja/docs/Web/Accessibility/ARIA/Roles/Search_role) + +### ライブリージョンロール + +- [Alert](/ja/docs/Web/Accessibility/ARIA/Roles/Alert_Role) +- [Log](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role) +- Marquee +- [Status](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role) +- Timer + +### ウィンドウロール + +- [Alertdialog](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role) +- [Dialog](/ja/docs/Web/Accessibility/ARIA/Roles/dialog_role) + +## ステートとプロパティ + +### ウィジェット属性 + +- aria-autocomplete +- aria-checked +- aria-current +- aria-disabled +- aria-errormessage +- aria-expanded +- aria-haspopup +- aria-hidden +- [aria-invalid](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute) +- [aria-label](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) +- aria-level +- aria-modal +- aria-multiline +- aria-multiselectable +- [aria-orientation](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute) +- aria-placeholder +- aria-pressed +- aria-readonly +- [aria-required](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute) +- aria-selected +- aria-sort +- [aria-valuemax](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute) +- [aria-valuemin](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) +- [aria-valuenow](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute) +- [aria-valuetext](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) + +### ライブリージョン属性 + +- aria-live +- [aria-relevant](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute) +- aria-atomic +- aria-busy + +### ドラッグ＆ドロップ属性 + +- aria-dropeffect +- aria-dragged + +### 関係属性 + +- [aria-activedescendant](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute) +- aria-colcount +- aria-colindex +- aria-colspan +- aria-controls +- [aria-describedby](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute) +- aria-details +- aria-errormessage +- aria-flowto +- [aria-labelledby](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) +- aria-owns +- aria-posinset +- aria-rowcount +- aria-rowindex +- aria-rowspan +- aria-setsize + +### MicrosoftEdge 固有のプロパティ + +- [x-ms-aria-flowfrom](/ja/docs/Web/API/x-ms-aria-flowfrom) {{Non-standard_Inline}} diff --git a/files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.html b/files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.html deleted file mode 100644 index 2a92eac790f073..00000000000000 --- a/files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: aria-activedescendant 属性の使用 -slug: web/Accessibility/ARIA/Attributes/aria-activedescendant -tags: - - ARIA - - Accessibility -translation_of: >- - Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute -original_slug: >- - Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute ---- -

    この記事では、aria-activedescendant プロパティについて説明します。

    - -

    説明

    - -

    aria-activedescendant 属性には、ドキュメントオブジェクトモデル内の複合ウィジェットの一部である、現在アクティブな子オブジェクトの ID が含まれます。 これは、1つ以上の子にフォーカスを持たせるというオーバーヘッドを伴います。 名前が指定するように、複合ウィジェットの現在アクティブな子を管理するのに役立ちます。

    - -

    ユーザーエージェントと支援技術への影響

    - -

    ユーザーエージェントは、検索、レンダリング、およびエンドユーザーとウェブコンテンツとのやりとりを容易にするソフトウェアで、aria-activedescendant プロパティを使用して、フォーカスを持っているアクティブな子について支援技術に通知します。 aria-activedescendant プロパティを使用するこのアクティブな子は、常に画面上に表示され、ドキュメントオブジェクトモデルのコンテナの子孫でなければなりません。

    - -
    注: 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 以下に示す情報は、これらの意見の1つで、したがって規範的ではありません。
    - -

    例

    - -

    Example 1:

    - -

    - -
    Code
    - -

    動作する例

    - -
      -
    - -

    注

    - -

    使用された ARIA 属性

    - - - -

    互換性

    - -

    TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する

    - -

    その他のリソース

    diff --git a/files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.md b/files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.md new file mode 100644 index 00000000000000..df83d73bcd4fe3 --- /dev/null +++ b/files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.md @@ -0,0 +1,44 @@ +--- +title: aria-activedescendant 属性の使用 +slug: web/Accessibility/ARIA/Attributes/aria-activedescendant +tags: + - ARIA + - Accessibility +translation_of: >- + Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute +original_slug: >- + Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute +--- +この記事では、[`aria-activedescendant`](https://www.w3.org/TR/wai-aria/#aria-activedescendant) プロパティについて説明します。 + +### 説明 + +`aria-activedescendant` 属性には、ドキュメントオブジェクトモデル内の複合ウィジェットの一部である、現在アクティブな子オブジェクトの ID が含まれます。 これは、1 つ以上の子にフォーカスを持たせるというオーバーヘッドを伴います。 名前が指定するように、複合ウィジェットの現在アクティブな子を管理するのに役立ちます。 + +### ユーザーエージェントと支援技術への影響 + +ユーザーエージェントは、検索、レンダリング、およびエンドユーザーとウェブコンテンツとのやりとりを容易にするソフトウェアで、`aria-activedescendant` プロパティを使用して、フォーカスを持っているアクティブな子について支援技術に通知します。 `aria-activedescendant` プロパティを使用するこのアクティブな子は、常に画面上に表示され、ドキュメントオブジェクトモデルのコンテナの子孫でなければなりません。 + +> **Note:** 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 以下に示す情報は、これらの意見の 1 つで、したがって規範的ではありません。 + +### 例 + +#### Example 1: + +```html +Code +``` + +#### 動作する例 + +### 注 + +### 使用された ARIA 属性 + +### 関連する ARIA 技術 + +### 互換性 + +TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する + +### その他のリソース diff --git a/files/ja/web/accessibility/aria/index.html b/files/ja/web/accessibility/aria/index.html deleted file mode 100644 index 68d0c2e1076f2c..00000000000000 --- a/files/ja/web/accessibility/aria/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: ARIA -slug: Web/Accessibility/ARIA -tags: - - ARIA - - Accessibility - - HTML -translation_of: Web/Accessibility/ARIA ---- -

    Accessible Rich Internet Applications (ARIA) はウェブコンテンツやウェブアプリケーション (特に JavaScript で開発するもの) を、ハンディキャップを持つ人々にとってよりアクセシブルにする方法を定義します。

    - -

    ARIA は、アプリケーションで一般的に使用されている対話操作やウィジェットを、他のメカニズムがない場合に支援技術に渡すことができるように HTML を補完します。例えば ARIA は、 HTML4 のアクセシブルナビゲーションランドマーク、 JavaScript のウィジェット、フォームのヒントやエラーメッセージ、ライブコンテンツの更新などを可能にします。

    - -
    -

    これらのウィジェットの多くは、後に HTML5 に組み込まれました。意味的に正しい HTML 要素が存在するのであれば、 ARIA を使用するよりも、その要素を使用したほうがいいでしょう。例えば、ネイティブな要素にはキーボードのアクセシビリティや役割、状態が組み込まれています。しかし、 ARIA を使用する場合は、スクリプトで (同等の) ブラウザーの動作を模倣する責任があります。

    -
    - -

    プログレスバーウィジェットのためのマークアップです。

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

    このプログレスバーは、意味を持たない <div> を使って作られています。残念ながら、 HTML 4 には開発者が利用できるより意味のある要素がないので、 ARIA の役割とプロパティを追加する必要があります。要素に属性を追加することでこれを指定します。この例では、 role="progressbar" 属性により、この要素が実際には JavaScript を使用したプログレスバーウィジェットであることをブラウザーに伝えています。 aria-valuemin および aria-valuemax 属性はプログレスバーの最小値と最大値を指定し、 aria-valuenow は現在の状態を表すため、 JavaScript から更新し続けます。

    - -

    マークアップに直接配置するとともに、 ARIA の属性を要素に追加して、次のような JavaScript コードを使用して動的に更新することができます。

    - -
    // プログレスバーの <div> を DOM 内で探す。
-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 は HTML4 以降に導入されたため、 HTML4 や XHTML の派生形では検証できません。ただし、技術的に問題があっても、それを上回るアクセシビリティの向上が得られます。

    - -

    HTML5 では、すべての ARIA 属性が有効です。新しいランドマーク要素 (<main>, <header>, <nav> など) は ARIA ロールに組み込まれたため、重複指定する必要はありません。

    -
    - -

    対応

    - -

    他のウェブ技術と同様に、 ARIA の対応には様々な程度があります。対応の程度は、使用しているオペレーティングシステムとブラウザー、それらと連携している支援技術の種類によって異なります。また、OS、ブラウザー、支援技術のバージョンも要因となります。古いバージョンのソフトウェアは、特定の ARIA ロールを対応していなかったり、部分的にしか対応していなかったり、機能を誤って報告していたりする可能性があります。

    - -

    また、支援技術に依存している人の中には、コンピューターやブラウザーとのやり取りができなくなることを恐れて、ソフトウェアの更新に消極的な人がいることも認識しておく必要があります。そのため、できるだけ意味を持った HTML 要素を使用することが重要です。意味を持った HTML は、支援技術への対応がはるかに優れているからです。

    - -

    また、作成した ARIA を実際の支援技術でテストすることも重要です。ブラウザーのエミュレーターやシミュレーターを使っても、完全な対応をテストするために効果的ではないのと同様に、代理の支援技術ソリューションを使用しても、機能性を完全に保証することはできません。

    - -

    チュートリアル

    - -
    -
    ARIA 入門
    -
    ARIA で動的コンテンツをアクセシブルにする方法の簡単な紹介です。2008 年に作成された、定評のある Gez Lemon 氏による ARIA の紹介もご覧ください。
    -
    Videos of screen readers using ARIA
    -
    ARIA の導入「前」および「後」を含む、ウェブ中の簡単な実例のビデオをご覧ください。
    -
    Using ARIA
    -
    開発者向けの実践的なガイドです。HTML 要素で使用する ARIA 属性は何かについて提案しています。提案内容は、実際の実装状況に基づいています。
    -
    - -

    単純な ARIA の強化

    - -
    -
    Enhancing page navigation with ARIA landmarks
    -
    画面リーダーの利用者向けにウェブページのナビゲーションを向上させるための、 ARIA landmark の使用法を紹介します。 ARIA landmark の実装状況の覚え書きや実際のサイトでの例もご覧ください (2011 年 7 月更新)。
    -
    フォームのアクセシビリティ向上
    -
    ARIA は動的コンテンツのためだけのものではありません! 付加的な ARIA の属性を使用して HTML フォームのアクセシビリティを向上させる方法を学びましょう。
    -
    - -

    スクリプトウィジェット向け ARIA

    - -
    -
    キーボードで操作可能な JavaScript ウィジェットを書く
    -
    <input> や <button> などのような組み込み要素は、キーボードのアクセシビリティが組み込まれています。これらを <div> と ARIA で「偽装」する場合は、ウィジェットがキーボードでアクセシブルであることを保証する必要があります。
    -
    ライブリージョン
    -
    ライブリージョンは、ページのコンテンツが変更された場合に、画面リーダーにどのように対処すべきかを提案します。
    -
    Using ARIA Live Regions to announce content changes
    -
    画面リーダーソフトウェア JAWS のメーカーによる、ライブリージョンについての簡単なまとめです。ライブリージョンは、 Firefox と NVDA、 Safari と VoiceOver でも対応しています。
    -
    - -

    リファレンス

    - -
    -
    ARIA ロール
    -
    MDN 上のすべての WAI-ARIA ロールをカバーするリファレンスページです。
    -
    - -

    標準化の取り組み

    - -
    -
    WAI-ARIA 仕様書
    -
    W3C の仕様書そのものです。
    -
    WAI-ARIA Authoring Practices
    -
    -

    一般的なウィジェットや対話操作をどのように ARIA 化するのが最良なのかを記述した、公式のベストプラクティス文書です。優れたリソースです。

    -
    -
    - -

    動画

    - -

    ARIA を理解するには、以下の講演が最適です。

    - -

    ARIA, Accessibility APIs and coding like you give a damn! – Léonie Watson

    - -

    バグ報告

    - -

    ブラウザー、スクリーンリーダー、JavaScript ライブラリの ARIA に関するバグを報告してください。

    - - - -

    Accessibility, AJAX, JavaScript

    - - diff --git a/files/ja/web/accessibility/aria/index.md b/files/ja/web/accessibility/aria/index.md new file mode 100644 index 00000000000000..74b1cd755c6a1e --- /dev/null +++ b/files/ja/web/accessibility/aria/index.md @@ -0,0 +1,109 @@ +--- +title: ARIA +slug: Web/Accessibility/ARIA +tags: + - ARIA + - Accessibility + - HTML +translation_of: Web/Accessibility/ARIA +--- +Accessible Rich Internet Applications **(ARIA)** はウェブコンテンツやウェブアプリケーション (特に JavaScript で開発するもの) を、ハンディキャップを持つ人々にとってよりアクセシブルにする方法を定義します。 + +ARIA は、アプリケーションで一般的に使用されている対話操作やウィジェットを、他のメカニズムがない場合に支援技術に渡すことができるように HTML を補完します。例えば ARIA は、 HTML4 のアクセシブルナビゲーションランドマーク、 JavaScript のウィジェット、フォームのヒントやエラーメッセージ、ライブコンテンツの更新などを可能にします。 + +> **Warning:** これらのウィジェットの多くは、後に HTML5 に組み込まれました。意味的に正しい HTML 要素が存在するのであれば、 **ARIA を使用するよりも、その要素を使用したほうがいいでしょう**。例えば、ネイティブな要素には[キーボードのアクセシビリティ](/ja/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)や役割、状態が組み込まれています。しかし、 ARIA を使用する場合は、スクリプトで (同等の) ブラウザーの動作を模倣する責任があります。 + +プログレスバーウィジェットのためのマークアップです。 + +```html +
    +
    +``` + +このプログレスバーは、意味を持たない `
    ` を使って作られています。残念ながら、 HTML 4 には開発者が利用できるより意味のある要素がないので、 ARIA の役割とプロパティを追加する必要があります。要素に属性を追加することでこれを指定します。この例では、 `role="progressbar"` 属性により、この要素が実際には JavaScript を使用したプログレスバーウィジェットであることをブラウザーに伝えています。 `aria-valuemin` および `aria-valuemax` 属性はプログレスバーの最小値と最大値を指定し、 `aria-valuenow` は現在の状態を表すため、 JavaScript から更新し続けます。 + +マークアップに直接配置するとともに、 ARIA の属性を要素に追加して、次のような JavaScript コードを使用して動的に更新することができます。 + +```js +// プログレスバーの
    を DOM 内で探す。 +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); +} +``` + +> **Note:** ARIA は HTML4 以降に導入されたため、 HTML4 や XHTML の派生形では検証できません。ただし、技術的に問題があっても、それを上回るアクセシビリティの向上が得られます。 +> +> HTML5 では、すべての ARIA 属性が有効です。新しいランドマーク要素 (`
    `, `
    `, `